I failed the last pass in product landing page, HELP!

[themalaysianguy]

Please help! I’m not sure where I did wrong and the navbar is already at the top, header and nav-bar id already have position:fixed . Here’s my codepen link:

https://codepen.io/amir-rosli/pen/eYvrNMg?editors=1100 :

<header id="header">
  <img id="header-img" src="https://cdn.vox-cdn.com/thumbor/G_w4Nyo9IJx5q5xa5E92vJCVyUQ=/21x0:539x345/1200x800/filters:focal(21x0:539x345)/cdn.vox-cdn.com/assets/3727699/Dogecoin_logo.png" alt="DogeCoin"/>
  
 <nav id="nav-bar">
   <div id="nav-items">
     <a class="nav-link" href="#home">Home</a>
     <a class="nav-link" href="#buy-dogecoin">Buy Dogecoin</a>
     <a class="nav-link" href="#buy-xrp">Buy XRP</a>
     <a class="nav-link" href="#buy-bitcoin">Buy Bitcoin</a>
     <a class="nav-link" href="#buy-ethereum">Buy Ethereum</a>
   </div>
  </nav>
</header>

<div class="box-position">

<h2 class="box-position">Subscribe to our newsletter to start draining your FIAT!</h2>
  
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input type="email" name="email" id="email" placeholder="Enter your email address" required/>
      <input id="submit" type="submit" value="Subscribe" class="btn"/>
  </form>

<section id="home">
  <h1>A cryptocurrency is a type of digital currency created from code. They function outside of traditional banking and government systems. Cryptocurrencies use cryptography to secure transactions and regulate the creation of additional units.</h1>
  
  <iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" height="200" title="What are cryptocurrencies?" allowfullscreen></iframe>
  </section>
  
  <section id="buy-dogecoin">
    <div>Dogecoin</div>
   <ol class="list-items">
     <li>Endorsed by Mas Elon</li>
     <li>Strong community support</li>
     <li>Listed on CoinBase</li>
    </ol>
    <button class="btn">Buy</button>
    </section>
    
    <section id="buy-xrp">
      <div>XRP</div>
      <ol class="list-items">
        <li>A bridge currency</li>
        <li>Adopted by a lot of central banks around the world</li>
        <li>Very strong community support</li>
        <li>Strong utility case</li>
        <li>Potential to go to the mun</li>
      </ol>
      <button class="btn">Buy</button>
  </section>
  
  <section id="buy-bitcoin">
    <div>Bitcoin</div>
    <ol class="list-items">
      <li>First cryptocurrency ever in the world</li>
      <li>Supported by a lot of Bitcoin maxis</li>
      <li>Store of value</li>
      <li>Tesla bought 1.5B$ worth</li>
    </ol>
    <button class="btn">Buy</button>
  </section>
  
  <section id="buy-ethereum">
    <div>Ethereum</div>
    <ol class="list-items">
      <li>A lot of DApps (decentralised apps) are built on top</li>
      <li>Crazy high gas fees</li>
      <li>Eth2.0 coming 'right around the corner'</li>
      <li>Endorsed by Mark Cuban</li>
    </ol>
    <button class="btn">Buy</button>
  </section>
  
  </div>

#header{
  position:fixed;
  background-color: #24252a;
  padding:10px;
  margin:10px;
}

@media (max-width: 600px){
  #header{
    flexwrap:wrap;
  }
}

#header-img{
  height:auto;
  width:100px;
  position:center;
}

#nav-bar{
  display:flex;
  background-color:grey;
}

#nav-items a {
  float: center;
  color: white;
  padding: 1px 10px;
  text-decoration: none;
  font-size: 18px;
  justify-content:center;
}

.box-position{
  font-family: "Montserrat", sans-serif;
  text-align:center;
  background-color:rgb(157, 157, 143);
  padding:10px;
  
}

#email{
  width:200px;
}

.list-items li{
  list-style-type:none;
}

[jwilkins.oboe]

Hi @themalaysianguy !

You need to add the top property here and then it will pass.

@themalaysianguy

#header{
  position:fixed;
  background-color: #24252a;
  padding:10px;
  margin:10px;
}

You can also reference this answer for how to make the header fixed all the way to the top.
https://www.tutorialrepublic.com/faq/how-to-create-fixed-header-or-footer-using-css.php

Hope that helps!

[themalaysianguy]

Thank you! All passed now!