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. 
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: