So hey, I am doing the 4th project from the Responsive Web Design course, and I can not pass the requirement of fixing the nav to the top of the viewport.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css" />
<title>Product Landing Page</title>
</head>
<body>
<div class="container">
<div class="container">
<header id="header">
<div class="container">
<div class="content">
<img id="header-img" src="">
<nav id="nav-bar">
<a class="nav-link" href="#contacts">Contact</a>
<a class="nav-link" href="#contacts">Products</a>
<a class="nav-link" href="#contacts">Services</a>
</nav>
</div>
</div>
</header>
<main>
<div class="container">
<div class="container">
<iframe id="video" width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
<input id="email" type="email" placeholder="Yeahs" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" name="email">
<input id="submit" type="submit" value="Submit">
</form>
</div>
</div>
</main>
<footer>
<p id="contacts"></p>
<p id="products"></p>
<p id="services"></p>
</footer>
</div>
</div>
</body>
</html>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 200vh;
}
#header .container .content {
position: fixed;
top: 0vw;
}
#nav-bar {
display: flex;
position: fixed;
top: 0;
}
