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.