Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Hi, Although I have submitted this project, I have realised that when clicking on my nav links, the fixed header/navbar actually hides the part the link is meant to navigate to.
I also have trouble trying to get my products to go in columns, and tried many ways to get it, but gave up. I guess while I’m asking for help, maybe I can get help for that too. :slight_smile:
Thanks in advance.

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
   <link href="styles.css" rel="stylesheet" types="text/css" />
   <header id="header">Kumihimo Products
     <img id="header-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnv8yZVCs4g2sPmekynbNDYcAfXvVPJSCxhQ&usqp=CAU" alt="company logo" ><img>
     <!--Navbar-->
    <div><nav id="nav-bar">

 <a class="nav-link" href="#form">Form</a>
 <a class="nav-link" href="#kumihimo">Kumihimo</a>
  <a class="nav-link" href="#video">Video</a>
  <a class="nav-link" href="#product-info">Products</a>
</nav></div>
   </header>
 </head>
 
 
   <body>
     <div id="page-break"></div>
     <section>
     <form id="form" action="https://www.freecodecamp.com/email-submit">
      <label> Enter your email:</label>
      <input id="email" type="email" name="email" placeholder="john.smith@fcc.com"></input>
   <input id="submit" type="submit"></input>
     </form>
     </section>
     <section>
     <p id="kumihimo" >Kumihimo is the Japanese art of braiding cord, using a variety of yarns, silks and other materials, with different sized and shaped frames. </p>
     </section>

     <!--video -->
     <section>
              <iframe id="video" width="560" height="315" 
class="center"     src="https://www.youtube.com/embed/suUcFpj4OsA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

<!--product info-->
<section id="product-info">
<header class="center" id="product-header">Products Used for Kumihimo</header>
<div class="product" id="p1">
 <div><img id="product-img" src="https://ae01.alicdn.com/kf/H1014baa47602457fa91b34e0df3cdd1bX/1Pc-Round-Square-Kumihimo-Beading-Cord-Disc-Disk-Braiding-Braided-Plate-DIY.jpg_Q90.jpg_.webp" alt="frame-img"></div>
 <h3>Frames</h3>
 <ul>
   <li>Different sizes</li>
   <li>Different shapes</li>
 </ul>
 <button class="btn">Explore more</button>
</div>
<div class="product">
 <div><img id="product-img" src="https://ae01.alicdn.com/kf/HTB1UID1JVXXXXXqXpXXq6xXFXXXC/Hot-Kumihimo-cords-10pcs-25meters-pcs-Multi-1mm-Macrame-Nylon-Cord-Silk-Beading-Thread-Bead-Cord.jpg_Q90.jpg_.webp"> </div>
 <h4>Threads</h4>
 <ul>
   <li>Different colours</li>
   <li>Different materials</li>
 </ul>
 <button class="btn">Explore more</button>
</div>
</section>

<p>For more information about Kumihimo, click <a href="https://en.wikipedia.org/wiki/Kumihimo" >here</a> </p>

   </body>
</html>
/* file: styles.css */
header {
   font-size: 40px;
 font-weight: bold;
 width: 100%;
 background-color: rgb(169, 127, 169);
 position: fixed;
}

#header-img {
 height: 60px;
 margin-top: 10px;
}
nav{
 background-color:  rgb(151, 139, 151);
 text-align: center;
 width: 100%;
}
nav a {
 color: purple;
 text-decoration: none;
}
nav a:hover{
 text-decoration: underline;
} 
.nav-link {
 font-size: 24;
}
#page-break {
 height:170;

}
#kumihimo {
 font-family: arial;
 font-weight: bold;
 font-size: 18;
 
}

#product-header {
 font-size:24;
  margin-top: 20px;
}
#product-info{
 background-color:rgb(169, 127, 169);
}
#product-info >.product {
  
 display: flex;

 align-items: center;
 text-align: center;
 width: calc(100%/2);
 margin: 10px;

}

#product-img {
 height: 200px;
 width: 200px;
}


.center {
 display: block;
 margin-left: auto;
 margin-right: auto; 
}

button {
 border: 2px solid black;
margin-left: 5px;
margin-bottom: 5px;

}
@media { background-color: white;
}

   **Your browser information:**

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge: