Product Landing Page - Build a Product Landing Page

Code does not pass the requirement for the navbar to stay at the top of the viewport.
In the viewport, the navbar remains at the top of the viewport while scrolling.

<html>
  <link rel="stylesheet" href="styles.css"/>
  <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 id="navbar" 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"
    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>Capable of atmospheric flight, the Mark VII is the front-line variant of the Viper design, retaining the Mark II's general layout but adding fully integrated avionics that provide superior battle management and flight information for the pilot.

Ironically, it is this incorporation of new integrated systems that prevents the majority of Mark VIIs from being effective during the Cylon attack: as with the majority of Colonial Fleet, the Mark VIIs suffer fatal computer system failures on contact with Cylon forces. Thanks to a Cylon agent's relationship with Dr. Gaius Baltar, scientist and programmer of the navigation software project, the navigational software in use on board most Colonial Fleet vessels contains back-doors that allow the Cylons to infiltrate a vessel's computers by wireless signals and to disable its power systems. Though this problem can be overcome by removing the navigational upgrade compromised by the Cylons, the information is not discovered in time to benefit the surprised and hard-pressed Colonial forces.

Being a single-seat craft, it mounts three forward-facing kinetic energy weapons (KEW). In addition, it possesses hard-points beneath the wings for mounting missiles, munitions pods and other ordnance (The Hand of God).

</p>
    <p id="viper-7"><h2>The Viper Mark 7</h2>Capable of atmospheric flight, the Mark VII is the front-line variant of the Viper design, retaining the Mark II's general layout but adding fully integrated avionics that provide superior battle management and flight information for the pilot.

Ironically, it is this incorporation of new integrated systems that prevents the majority of Mark VIIs from being effective during the Cylon attack: as with the majority of Colonial Fleet, the Mark VIIs suffer fatal computer system failures on contact with Cylon forces. Thanks to a Cylon agent's relationship with Dr. Gaius Baltar, scientist and programmer of the navigation software project, the navigational software in use on board most Colonial Fleet vessels contains back-doors that allow the Cylons to infiltrate a vessel's computers by wireless signals and to disable its power systems. Though this problem can be overcome by removing the navigational upgrade compromised by the Cylons, the information is not discovered in time to benefit the surprised and hard-pressed Colonial forces.

Being a single-seat craft, it mounts three forward-facing kinetic energy weapons (KEW). In addition, it possesses hard-points beneath the wings for mounting missiles, munitions pods and other ordnance (The Hand of God).

</p>
    <p id="raptor-2"><h2>The Raptor, Generation 2</h2>Capable of atmospheric flight, the Mark VII is the front-line variant of the Viper design, retaining the Mark II's general layout but adding fully integrated avionics that provide superior battle management and flight information for the pilot.

Ironically, it is this incorporation of new integrated systems that prevents the majority of Mark VIIs from being effective during the Cylon attack: as with the majority of Colonial Fleet, the Mark VIIs suffer fatal computer system failures on contact with Cylon forces. Thanks to a Cylon agent's relationship with Dr. Gaius Baltar, scientist and programmer of the navigation software project, the navigational software in use on board most Colonial Fleet vessels contains back-doors that allow the Cylons to infiltrate a vessel's computers by wireless signals and to disable its power systems. Though this problem can be overcome by removing the navigational upgrade compromised by the Cylons, the information is not discovered in time to benefit the surprised and hard-pressed Colonial forces.

Being a single-seat craft, it mounts three forward-facing kinetic energy weapons (KEW). In addition, it possesses hard-points beneath the wings for mounting missiles, munitions pods and other ordnance (The Hand of God).

</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>

#nav-bar {
  display: flex;
  
  position: fixed;
  top: 0;
  background-color: rgb(25, 25, 25);
  width: 100%;
  padding: 10px;
  padding-top: 0px;
}

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

* {
  background-color: rgb(25, 25, 25);
}

@media iframe {
  width: 800px;
  height: 500px;
}

.body {
  color: linen;
  padding: 20px;
}

h2 {
  color: linen;
}

#submit {
  color: linen;
}

MS Edge browser

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:

please describe what’s the issue

Hello!

You may wish to check out this article for assistance with the nav-bar.

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