Build a Product Landing Page Display half sieze

Hey I am having problems with creating my product landing page for this FCC challenge.

While I was checking what I have done so far I noticed, that my HTML document is only half the size of the viewport.
Can someone help me with this issue please?

This is my code so far:

<script src=""></script>
<div class="page-container">
   <header id="header">
      <div id="nav-container">
        <img id="header-img"  src=""     alt="Apples Logo">
         <nav id="nav-bar">
             <li><a href="#product-details" class ="nav-link"> Description</a></li>
             <li><a href="#apple-varieties" class ="nav-link"> Varieties</a></li>
             <li><a href="#product-video" class ="nav-link"> Harvest</a></li>
             <li><a href="#contact" class ="nav-link"> News</a></li>
  <section id="hero">
    <h1 class="green-heading"> An apple a day keeps the doctor away </h1>
    <h3 class="red-text"> Stay healthy with apples </h3> 
    <img id="single-apple" src = "" alt = "Picture of a single apple"</img>
        <button type="button" class = "red-button">Learn more</button>
   <div class="heading-container">
      <h2 class="red-heading"> Apples are among the most popular types of fruit in the world. </h2>
<section id="product-details">
  <p> Their Latin name is Malus domestica.
They originate from Central Asia. Now they are are grown all over the world. Apples are high in fiber, vitamin C and various antioxidants.  There are many different types, with a variety of colors and sizes. Studies show that eating apples can have multiple benefits for health. </p>
   <img id="single-apple" src = "" alt = "Picture of two red and green apples"</img>
  <section id = "apple-varieties">
    <h2 class = "red-heading">10 most popular apple varieties in the world </h2>
  <ul id="apples-list">
       <li>Red Delicious</li>
       <li>Granny Smith</li>
       <li>Ginger Gold</li>
<section id="product-video">
  <h2 class="white-heading"> Harvesting apples </h2>
  <p> Each variety of apple has its own maturation time and can be dependent upon weather conditions during the growing season. For example, apples will ripen earlier if there is a mild, sunny spring which kick starts the tree’s fruiting cycle early.</p>
  <button type="button" class = "red-button">Watch video</button>

  <iframe id="video" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <div class="heading-container">
      <h2 class="red-heading">You want to stay informed about apples? </h2>
  <img id="apple-icon" src = "" alt = "Apple as an icon"</img>
<section id="contact">
  <span> Just drop your e-mail here and submit </span>
  <form id="form" action="">
   <label for="email" id="email-label">E-Mail-Adresse
		<input type="email" id="email" name="email" placeholder="" required>
    <input type="submit" value="submit" id="submit" class="red-button" target="blank" formaction="">

Your browser information:

User Agent is: Chrome/Version 73.0.3683.103 (Official Build) (64-bit).

Hey @Anni

Did you add width:50vw to your body in any case?. If not post the css here.

Thank you, I only had to reload the browser, then it worked.

1 Like