Product Landing Page - Build a Product Landing Page

I am trying to figure out what they mean by the top of the viewport:
The #navbar is not at the top of the viewport. Can someone remind me what they mean by the viewport?

<head>
  <meta name="viewport" content="width=500, initial-scale=1.0">

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
 
<div id="page-wrapper">


<header id="header">  <div class="logo"> <nav id="nav-bar"><img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombone image"/></div>
</header>

  <ul>
    <li>
  <a href="#features" class="nav-link" id="features"></a>
  </li>
  <li>
  <a href="#how_it_works" class="nav-link" id="how_it_works"></a>
  </li>
  <li>
  <a href="#pricing" class="nav-link" id="pricing"></a>
  </li>
  </ul>
  </nav>
  <div class="container"></div>
  <section id="hero">
  <h2 id="heading1">Handcrafted, home-made masterpieces</h2>
  
 <form id="form" action="https://www.freecodecamp.com/email-submit">
 
 <input id="email" placeholder="Enter your email address" type="email" name="email"/>
 <input id="submit" type="submit" value="GET STARTED" class="btn"/>
 
 </form>
 
 </section>
 <div class="container">
   <section id="premium-materials">
     <div class="icon">
       <i class="fa fa-3x fa-fire"></i></div>
       <div id="desc">
     <h2>Premium Materials</h2>
     <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
     </div>
     </div>
     
     
     </section>
     <section id="fast-shipping">
          <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
          <div id="desc">
       <h2>Fast Shipping</h2>
      <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.

</p>
</div>
</div>
     </section>
     <section id="quality-assurance">
              <div class="icon">
          <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
          </div>
       <div id="desc"><h2>Quality Assurance</h2>
       <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</div>
</div>
</p>
     </section>
<video controls width="250" src="https://youtu.be/y8Yv4pnO7qc" id ="video">
 
</video>

 </div>
  </nav>
  </div></header>
  </body>
/* file: index.html */
<head>
 <meta name="viewport" content="width=500, initial-scale=1.0">

<link
 rel="stylesheet"
 href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
 integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
 crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>

<div id="page-wrapper">


<header id="header">  <div class="logo"> <nav id="nav-bar"><img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombone image"/></div>
</header>

 <ul>
   <li>
 <a href="#features" class="nav-link" id="features"></a>
 </li>
 <li>
 <a href="#how_it_works" class="nav-link" id="how_it_works"></a>
 </li>
 <li>
 <a href="#pricing" class="nav-link" id="pricing"></a>
 </li>
 </ul>
 </nav>
 <div class="container"></div>
 <section id="hero">
 <h2 id="heading1">Handcrafted, home-made masterpieces</h2>
 
<form id="form" action="https://www.freecodecamp.com/email-submit">

<input id="email" placeholder="Enter your email address" type="email" name="email"/>
<input id="submit" type="submit" value="GET STARTED" class="btn"/>

</form>

</section>
<div class="container">
  <section id="premium-materials">
    <div class="icon">
      <i class="fa fa-3x fa-fire"></i></div>
      <div id="desc">
    <h2>Premium Materials</h2>
    <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
    </div>
    </div>
    
    
    </section>
    <section id="fast-shipping">
         <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
         <div id="desc">
      <h2>Fast Shipping</h2>
     <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.

</p>
</div>
</div>
    </section>
    <section id="quality-assurance">
             <div class="icon">
         <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
         </div>
      <div id="desc"><h2>Quality Assurance</h2>
      <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</div>
</div>
</p>
    </section>
<video controls width="250" src="https://youtu.be/y8Yv4pnO7qc" id ="video">

</video>

</div>
 </nav>
 </div></header>
 </body>
/* file: styles.css */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
#submit{
 display:block;
 margin:0 auto;
 text-align:center;
}
#email{
  display:block;
 margin:0 auto;
 width:45%;
 padding:5px;
 
 
}
.btn{
 width:25%;
 height:25px;
 background-color:#FEA500;
 border:none;
 color:#0D0902;
 font-weight:bold;
}


#heading1{
 text-align:center;
}



.icon{
 position:relative;
 display: flex;
   align-items: center;
   justify-content: center;
   height: 125px;
   width: 20vw;
   color: darkorange;
   top:5px;
   left:5px;
}
.container{
 justify-content:align;
}
#video{
 
}
   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

They want navbar to be visible and at the top of browser window always, even if you are scrolling down your page.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.