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

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 :expressionless:. 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;
}

Hi @themalaysianguy !

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

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!

1 Like

Thank you! All passed now!