Product landing page please help me

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:

Similar questions (and solutions) have been posted on this forum. They shouldn’t be hard to find.

1 Like