Landing page di un prodotto - Costruisci la landing page per un prodotto

Italiano HTML-CSS
1

non riesco a risolvere
L’elemento #nav-bar dovrebbe sempre essere in cima al viewport.
non riesco a capire cosa sbaglio su #nav-bar

Il tuo codice fino ad ora

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="it">
<head>
    <meta name="viewport" content="width=device-width,  initial-scale=1.0">
    <title>coltelli on-line</title>
    <meta charset="utf-8">
    <link href="styles.css" rel="stylesheet" >
 </head>
    <body>
        <header id="header">
            <img id="header-img" alt="logo" src="">
            <nav id="nav-bar">
            <ul>
                <li><a class="nav-link" href="#welcome"></a></li>
                <li><a class="nav-link" href="#pubblicità"></a></li>
                <li><a class="nav-link" href="#prodotti"> </a></li>
         </ul>
         </nav>
        </header>
        <main>
            <div class="intro">
        <h1 id="welcome"></h1>
        <p></p></div>
            <form id="form" action="https://www.freecodecamp.com/email-submit">
                <div class="invio">
                <h2 id="pubblicità"></h2>
                <input type="email" placeholder="enter your email adress" id="email" required value="email" name="email">
                <input id="submit" type="submit" value="submit" >
            </div>
            </form>


        <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/p3Iigu0JlNI"  id="video"
        title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen></iframe></div>
        
        
        <h1 id="prodotti">PRODOTTI</h1>
        <div class="product">
        <a   href="https://www.victorinox.com/global/it/Prodotti/Swiss-Army-Knives/c/SAK"><img alt="link-pagina"  src="https://imageengine.victorinox.com/medias/?context=bWFzdGVyfHJvb3R8OTU4MDZ8aW1hZ2UvanBlZ3xoNjcvaGVhLzEzNTg0MTU0Nzg3ODcwL3Nhay1zbWFsbC1wb2NrZXQta25pdmVzLUxfNTI2eDMwMGpwZy5qcGd8M2MwMzcxYTBlMzIxOTdkODExM2Y4NzdhZTVlNTMwM2I5NjQ5NGU1ODgwYTlmNDk0MDNhYTU3M2FiMTI1OTZkNg"></a>
    </div>
    </main>
    </body>
</html>

/* file: styles.css */
nav{
    width: 100%;
    height: 100%;

    justify-content:space-between ;
    padding-top:2.4% ;
    
}



*, ::before, ::after{
    padding: 0;
    margin: 0;
    font-size: 30px;
    
    }

body{
    display: flex;
    flex-direction: column;
}

header {
    top: 0;
    display: flex;
    
    background-color: #e2dfdf;
  }

  ul {
    display: flex;
    list-style: none;
    justify-content: space-evenly;
  }


a{
     text-decoration: none;
    color: black;
}

main{margin: 20px 40px;}

.intro{
    padding: 2% 0;
}

form{
    padding: 3% 0;
    align-items: center;
    text-align: center;

}

h2{
    padding: 1% 0;
}
 
.invio{
    text-align: center;
    width: max-content;
   display: inline-block;
   background-color: yellowgreen;
   padding: 4% 20px;
}
.video{
    display: flex;
    justify-content: center;
    padding: 3% 0;
}

h1{
    text-align: center;
}
.product{
    display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
hr{
    width: 0;
    color: transparent;}

   

@media(max-width: 600px;)
{
    img{
    max-width: max-content;
    }
}

opera

OPR/95.0.0.0

Sfida: Landing page di un prodotto - Costruisci la landing page per un prodotto

Link alla sfida:

2

Ciao, se non hai ancora risolto il problema magari questo potrebbe esserti utile