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: