Tell us what’s happening:
Describe your issue in detail here.
even when i set header or nav as fixed, it seems not to be taking any effects. how can i make my nav-bar remain at the top of the viewport
**Your code so far**
<style>
header {nav
{position: fixed;}
}
nav ul{
float: right;
margin-right: 1em;
}
nav li{
display: inline;
padding: 1em;
display: inline-block;
}
p {display: flex;}
@media screen and (max-width: 600px) {
body {
background-color: grey;
}
}
</style>
```
```html
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img
id="header-img"
src="https://play-lh.googleusercontent.com/_lq2HX0YJNDrr0EeUebLAB2JsGbRGyoFY-XOnuUFTPfeEqaHNIyMOGqLx-oq4mUWPpn0"
/>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How we Work</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container"></div>
<section id="hero">
<h2>Our delicious Hand made Pizza</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address"
required
/>
<input id="submit" type="submit" value="Get Started" class="btn" />
</form>
</section>
<div class="container">
<section id="features">
<h2>Our Pizza</h2>
<p>
Our Pizza is one of the best selling in the world because we provide our consumer with the exact taste the desire from every bite of every slice of our Pizza
</p>
</div>
</div>
<h2>Fast Delivery</h2>
<p>
We make sure you recieve your Pizza as soon as you order it, hot and ready to consume
</p>
</div>
</div>
<div class="desc">
<h2>Quality Packaging</h2>
<p>
Our Pizza is well Packaged in such a way that it gets to the consumer intact without damages
</p>
</div>
</div>
</section>
<section id="how-it-works">
<iframe
id="video"
height="315"
src="https://youtu.be/jPQ87J_5qyw"
frameborder="0"
allowfullscreen
></iframe>
</section>
<section id="pricing">
<div class="product" id="tenor">
<div class="level">Our Workers at work</div>
<h1> Our Pricing </h1>
<h2>$6</h2>
Small Size
<button class="btn">Select</button>
</div>
<div class="product" id="bass">
<div class="level">Mini Pizza</div>
<h2>$9</h2>
Large Pizza
<button class="btn">Select</button>
</div>
<div class="product" id="valve">
<div class="level">Chairman Pizza</div>
<h2>$12</h2>
Extra large Pizza
<button class="btn">Select</button>
</div>
</section>
</footer>
</div>
</div>
</body>
</html>
/* file: styles.css */
<style>
header {nav
{position: fixed;}
}
nav ul{
float: right;
margin-right: 1em;
}
nav li{
display: inline;
padding: 1em;
display: inline-block;
}
p {display: flex;}
@media screen and (max-width: 600px) {
body {
background-color: grey;
}
}
</style>
**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: Responsive Web Design Projects - Build a Product Landing Page
Link to the challenge:
