Landing Page del producto - Construye una página de inicio de producto

HOLA, COMO ESTAN? NECESITO AYUDA, ME FALTAN ESTOS ULTIMOS TRES PASOS:

  • Tu #nav-bar siempre debe estar en la parte superior de la ventana gráfica.

  • Falló:Tu página de aterrizaje de un producto debe usar por lo menos una consulta de medios.

  • Falló:Tu página de aterrizaje de un producto debe usar CSS Flexbox por lo menos una vez.

ESTOY PERDIDO, EN CUANTO A LA ESTETICA DE COMO MEJORAR MIS PROYECTOS, COMO PUEDE HACER MEJOR MIS CSS. MUCHAS GRACIAS!

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <title>Mates</title>
    <link rel="stylesheet" href="styles.css" />
    </head>
    <body>

      

      <header id="header">

        <nav  id="nav-bar">
          
          <ul>
            <li><a href="#que_es_un_mate?"class="nav-link">que es un mate?</a></li>

            <li><a href="#de_que_estan_hechos?"class="nav-link">de que estan hechos?

            </a></li>
            <li><a href="#hay_gama_de_precios?"class="nav-link">hay gama de precios?

            </a></li>
          </nav>
          
        <img src="https://seeklogo.com/images/C/cuia-de-chimarrao-logo-53F1D3DEBF-seeklogo.com.png" id="header-img" alt="logo mate" loading="lazy">
        
        </header>

        

          <section class="section" id="que_es_un_mate?">
            
            <p>Un Mate es tipico de Argentina</p>
            <ul>
              <li>se bebe desde hace siglos</li>
              </section>

              <section class="section" id="de_que_estan_hechos?">
           
            <p>Hay de distintos tipos de materiales</p>
            <ul>
              <li>existen de madera, acero inoxidable, goma</li>

              </section>

              <section class="section" id="hay_gama_de_precios?">
           
            <p>Hay una amplia gama de precios</p>
            <ul>
              <li>rondan desde los $2 a $5</li>
              </section>

              

        
       <iframe id="video" width="200" height="200" src="https://www.youtube.com/embed/XYHfs9tsmFM" title="¿QUÉ SABES SOBRE EL MATE? | Draw My Life" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>    

 <br>
  <br>

<form id="form" method="post" action="https://www.freecodecamp.com/email-submit">

  <div class="campo_email">

    <label for="email">Para mas informacion</label>

  <input id="email" type="email" name="email" placeholder="Ingresa tu correo electrónico" required>

  <br>
  <br>

  <input id="submit" type="submit" value="GET STARTED">





















      </body>
/* file: styles.css */
#header-img{
width: 25%;
display: flexbox;
flex-direction: row ;
}

#li{
  text-decoration: none;
}

Your browser information:

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

Challenge Information:

Landing Page del producto - Construye una página de inicio de producto