Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
I keep getting the error: " * Your #nav-bar should always be at the top of the viewport."
As built, the nav-bar does stay at the top of the viewport.
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="styles.css"/>
  <meta lang="en">
  <meta width="device-width">
  <header id="header">
    <img id="header-img" src="https://www.geeky-gadgets.com/wp-content/uploads/2012/03/Battlestar-Galactica-Viper.jpg" width="400"/>
    <div class="navbar">
    <nav id="nav-bar">
      <a class="nav-link" id="mark-2" href="#viper-2">Viper Mk. 2</a>
      <a class="nav-link" id="mark-7" href="#viper-7">Viper Mk. 7</a>
      <a class="nav-link" id="gen-2" href="#raptor-2">Raptor Gen. 2</a>
    </nav></div>
  </header>
  <div></div>
  <section>
    <iframe id="video"
    width= "350" src="https://www.youtube.com/watch?v=UdAj_z_FKnw">
    </iframe>
  </section>
  <section class="body" id="body-paragraphs">
    <p id="viper-2"><h2>The Viper Mark 2</h2>Several paragraphs about the viper mark 2.;laksdf;alksjdf;laksjd;falksdjf;laksdjf;alksjdf; lkajsd;flkjas;dljfa;sldkj f;alksjdf;alsjdf;lakjsdf;lajsd;lfkjas;ldkfja;ls kdjf;alksjd f;lkasjdf;lkajsd;flkjas;dlfkjas;dlfkja;sdlkfja;sl kdfj;aslkd fj;alsk djf;alksdjf;alskdjf;alskdjf;laksjdf;laksjdf;laksjdf;laksdjf;alksjdf;alksdjf;alskdjf;alskdjf;alskdjf;laksdjf;als kdjf ;alskjdf;alksjdf;alksjdf;aslkdjf;alskdjf;alskdjf;laks jdflaksjdf;laksdjf;aslkdfj;aslkdfj;alskdjfa
      ;laksjdf;laksjd;flkasjd;flkajsd;flkja s;dlkfja;slkdfj;alskdfj;alksdjf;a lksdj f;alskdjf;;dlfkas;ldkfja ;sldkfja;sldkfja;sldkfjj</p>
    <p id="viper-7"><h2>The Viper Mark 7</h2>Several paragraphs about the viper mark 7.;laksdf ;alksjdf;laksjd;falksdjf;laksdjf;alksj df;lkajsd;flkjas;dljfa;sldkjf;alksjdf;alsjdf; lakjsdf;la jsd;lfkjas;ldkfja ;lskdjf;a lksjdf;lkasjdf;l kajsd;flkjas;dlfkjas;dlfkja;sdlk ja;slkdfj;aslkdfj;al skdjf;alksdjf;alskdjf;alskdjf;laksjdf;laksjdf;laksj df;laksdjf;alksjdf;alksdjf;alskdjf;als kdjf;als kdjf;laksd jf;alskdjf;alskjdf;alksjdf; ;as lkdjf;alskdjf;alskdjf;laksjdflaksjdf;laksdjf;aslkdfj;a slkdfj;alskdjfa
      ;laksjdf;la ksjd;flkasjd;flkaj sd;fl kjas;dlkfja;slkdfj;alskdfj;alksdjf;a lksdjf;alskdjf;;dlfkas;ldkfj a;sldkfja;sldkfja;sldkfjj</p>
    <p id="raptor-2"><h2>The Raptor, Generation 2</h2>Several paragraphs about the Raptor.;laksdf;al ksjdf;laksjd;falksdjf;laksdjf;alksjdf; lkaj sd;flkjas;dljfa;sl dkjf;alksjdf;alsjdf;lakjsdf;lajsd;l fkjas; ldkfja;lskdjf;a lksjdf; lkasjdf;lkajsd;flkj as;dlfkjas;dlfkja;s dlkfja;slkdfj;aslkdfj;alskd jf;alksdjf;alskdjf; alskdjf ;laksjdf;laksjdf;laksjdf;laksdjf;alks jdf;alksdjf;alskdjf; alskdjf;alskdjf;la ksdjf;alskdjf;als kjdf;alksjdf dflaksjdf;laksdjf;aslkdfj; ;alskdjfa
      ;laksjdf;laksjd;flkasjd;flkajsd;flkjas;d lkfja;slkdfj;alskdfj; alksdjf;alks djf;alskdjf;;dlfkas; ldkfja;sldkfja;sldkfja;sldkfjj</p>
    </section>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" type="email" placeholder="Email Address" name="email"></input>
    <input id="submit" type="submit"></input>
  </form>
</html>

/* file: styles.css */
#nav-bar {
  display: flex;
  position: fixed;
  top: 0;
  background-color: white;
  width: 100%;
  padding: 10px;
  padding-top: 0px;
}

nav a {
  justify-content: space-evenly;
  display: inline-block;
  padding: 20px;
}

header {
  margin-top: 45px;
}

p {
  width: 400px;
  margin: 5vw;
  overflow: wrap;
  word-wrap: break-word;
}

@media video {
  width: 800px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.188

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hello!
This may be able to help you solve your issue with the navbar.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.