Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
for some reason it doesn’t detect that I have the navbar on top of the view port whenever I run the test code

Your code so far

I know the code is kinda messy

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>product landing page</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
  </head>
  <body>
    <header id="header">
      <div class="navbar">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="an image of your mom of course" id="header-img"/>
        <nav id="nav-bar">
          <ul class="nav-links">
            <li><a href="#premium" class="nav-link">features</a></li>
            <li><a href="#video" class="nav-link">how it works</a></li>
            <li><a href="#box" class="nav-link">Pricing</a></li>
         </ul>
       </nav>
     </div>
    </header>
    <h4>Handcrafted, home-made masterpieces</h4>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <fieldset>
        <label><input type="email" placeholder="enter your email address" required id="email" name="email"/></label>
        <br>
        <label><input type="submit" value="get started" id="submit"></label>
      </fieldset>
    </form>
    <div class="text-to-trick-our-customers wrap">
      <div class="premium">
        <h3 id="premium">Premium Materials</h3>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      </div>
      <div class="slow-shipping">
        <h3>fast shipping</h3>
        <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 class="I-am-not-sure">
        <h3>Qaulity Assurance</h3>
        <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. </p>
      </div>
    </div>
    <iframe width="300" height="290"
src="https://www.youtube.com/watch?v=y8Yv4pnO7qc&feature=youtu.be&ab_channel=TheUnitedStatesArmyFieldBand" id="video"></iframe>
    <div class="flex-container" id="box">
      <div class="box1">
        <div class="text">Tenor Trombone</div>
        <h2>$600</h2>
        <ol>
          <li>
    Lorem ipsum.
    Lorem ipsum.
    Lorem ipsum dolor.
    Lorem ipsum.
         </li>
        </ol>
        <label><input type="submit" value="SELECT"></label>
      </div>
      <div class="box2">
      </div>
      <div class="box3">
      </div>
    </div>
    <footer id="footer">
      <ul class="footer-links">
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
        <li><a href="#">Contract</a></li>
      </ul>
      <span>Copyright 2016, Original Trombones</span></footer>  
  </body>
</html>

css code:
body {
  background-color: #eee;
  font-family: sans;
}



#header-img {
  display: block;
  width: 300px;
  padding: 9px;
}

.nav-links > li {
  display: inline;
  float: left;
}

.nav-links > li > a {
  display: block;
  padding: 2px 40px;
  text-decoration: none;
}

a:link {
  color: #000;
}

.nav-links {
  list-style-type: none;
  overflow: hidden;
  display: inline-block;
}

.navbar {
  position: fixed;
  width: 100%;
  top: 0%;
  left: 56%;
}

fieldset {
  border: none;
  display: block;
  margin: 0.5em auto;
  text-align: center;
}

h4 {
  text-align: center;
  margin-bottom: 0px;
}

input[value="get started"] {
  margin: 1em auto;
  background-color: yellow;
  width: 150px;
  border: none;
  height: 30px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;

}

.text-to-trick-our-customers {
  height: 10px; 
  line-height: 15px;
  position: relative;
  left: 190px;
  word-break: break-all;
}

.I-am-not-sure > p {
  vertical-align: middle;
  margin-top: -15px;
}

.premium > p {
  vertical-align: middle;
  margin-top: -15px;
}

.slow-shipping > p {
  vertical-align: middle;
  margin-top: -15px;
}

.wrap {
  width: 80vw;
  border: 1px solid none;
}

.slow-shipping, .premium, .I-am-not-sure {
  margin-bottom: 50px;
}

iframe {
  margin: 300px 0px 0px 490px;
  overflow: hidden;
}

.box1 {
  width: 300px;
  height: 350px;
  border: 1px solid #000;
  margin: 10px;
}

.box2 {
  width: 300px;
  height: 350px;
  border: 1px solid #000;
  margin: 10px;
}

.box3 {
  width: 300px;
  height: 350px;
  border: 1px solid #000;
  margin: 10px;
}

.flex-container {
  display: flex;
  justify-content: center;
}

.text {
  text-align: center;
  background-color: red;
  height: 30px;
  padding-top: 10px;
}

h2 {
  text-align: center;
}

input[value="SELECT"] {
  margin: 100px;
  background-color: yellow;
  width: 100px;
  border: none;
  height: 30px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
}

#footer {
  margin: 20px 20px 0px 20px;
  border: 1px solid none;
  background-color: grey;
  height: 60px;
  width: 90vw;
}

#footer > span {
  display: flex;
  justify-content: flex-end;
}

.footer-links {
  list-style-type: none;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

.footer-links > li > a {
  padding: 2px 5px;
  text-decoration: none;
}

@media only screen and (max-width: 400px) {
  .navbar {
    position: relative;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:94.0) Gecko/20100101 Firefox/94.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

You can try this :

.navbar {
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}

for some reason this solution didn’t work, I then tried replacing the selector with #nav-bar but it also didn’t work

well turns out having the media query specifying that the navbar doesn’t stick made it so it didn’t count that I had the navbar stick, so I changed the media query to position: fixed;

anyways thx for the help @lechcerodelot