Tell us what’s happening:
Describe your issue in detail here.
I can not pass the challenge: Your #nav-bar should always be at the top of the viewport. What should i do, thank you
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Landing Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>
</head>
<body>
<main>
<header id="header">
<div class="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png " alt="logo">
</div>
<nav id="nav-bar">
<a class="nav-link" href="#Features">Features</a>
<a class="nav-link" href="#How_it_works">How it works</a>
<a class="nav-link" href="#Pricing">Pricing</a>
</nav>
</header>
</main>
</body>
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" name="email" type="email" placeholder="Enter your email here" required>
</input>
<input id="submit" type="submit" value="Get Started"></input>
</form>
<div id="Features"> <i class="fa-duotone fa-fire-flame-curved"></i><strong>Premium Materials</strong>
<div>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</div>
<div id="Features"><strong>Fast Shipping</strong>
<div>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.</div>
<div id="Features"><strong>Quality Assurance</strong>
<div>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>
<section id="How_it_works" >
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="Pricing">
<div class="product">
<div class="trombone">TENOR TROMBONE</div>
<h2>$600</h2>
<ul>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ul>
<button class="btn">Select</button>
</div>
<div class="product">
<div class="trombone" >BASS TROMBONE</div>
<h2>$900</h2>
<ul>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ul>
<button class="btn">Select</button>
</div>
<div class="product">
<div class="trombone">VALVE TROMBONE</div>
<h2>$1200</h2>
<ul>
<li>Plays similar to a Trumpet</li>
<li>Great for Jazz Bands</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ul>
<button class="btn">Select</button>
</div>
</section>
/* file: styles.css */
html{
box-sizing:border-box;
}
#header-img{
height:40px;
}
#nav-bar{
}
.nav-link{
text-decoration:none;
color:black;
margin:5px;
}
.nav-link:hover{
background-color:#99c9ff;
color:white;
}
h2{
text-align:center;
}
#email{
width: 50vw;
margin-left : 25vw;
}
#submit{
background-color:rgb(255, 215, 0);
width: 50vw;
margin-left : 25vw;
}
.product{
border: 1px solid #000;
display:inline-flex;
flex-direction:column;
width:calc(100%/3);
text-align:center;
}
.trombone{
text-align:center;
background-color:#00FFFF;
font-weight:bold;
}
ul{
list-style:none;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Challenge: Build a Product Landing Page
Link to the challenge: