Tú #nav-bar siempre debe estar en la parte superior del viewport

Español HTML-CSS
#1

Cuéntanos qué está pasando:
Describe tu problema en detalle aquí.

  **Tu código hasta el momento**

/* file: index.html */
<html>
<head>
  
  <style>
    #header-img {
      width: 150px;
    }
  </style>
</head>

<body>

<header id="header">
  <nav id="nav-bar">
    <a class="nav-link" href="#leer-mas">Leer Mas</a>
    <a class="nav-link" href="#cupon-descuento">Cupon de descuento</a>
    <a class="nav-link" href="#comprar-amazon">Comprar en Amazon</a>
  
  </nav>  
   
  <img id="header-img" src="https://i.pinimg.com/originals/21/aa/e3/21aae324d1ba626b4b19c9bbe4b4c834.png">
 
</header>

<section id="leer-mas">
  <iframe id="video" width="200" height="200" src="https://www.youtube.com/embed/Fc2koNqnFMw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="cupon-descuento">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" type="email" name="email" placeholder="email@gmail.com">
    <input id="submit" type="submit"></input>
  </form>  
</section> 
<section id="comprar-amazon"></section>  
<h1>Que la gente crea</h1>

</body>
</htmal>

/* file: styles.css */


  **Información de tu navegador:**

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Desafío: Construye una página de aterrizaje de producto

Enlaza al desafío:

#2

Where is all your CSS?

The nav or header has to be positioned using fixed or sticky so it remains at the top of the page when it is scrolled.

#3

i have the same problem and still doesn’t work

#4

Without seeing your code we can’t help.

#5

body{
background-color: rgb(199, 227, 227);
color: red;
flex: auto;
display: flex;

}

#header-img{
width: 50%;
display: flexbox;
flex-direction: row;

}
#header{
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;

}
#nav ul{
display: flex;
flex-direction: row;

}
#nav-bar{
display: flexbox;
flex-direction: row;

@media (max-width: 500px){
body{

background-color: red;

}
#header-img{
width: 70%;
}
}

#8

Te recomiendo crear una pregunta aparte y compartir tanto el código HTML como el codigo CSS

El código html está correcto, solo te falta agregar el código css

La barra de navegación tiene que tener esta función:
https://product-landing-page.freecodecamp.rocks/
Aunque bajes la página, la barra de navegación siempre tiene que ser visibl

#9

El código html está correcto, solo te falta agregar el código css

La barra de navegación tiene que tener esta función:

https://product-landing-page.freecodecamp.rocks/

Aunque bajes la página, la barra de navegación siempre tiene que ser visible