Responsive Web Design Projects - Build a Product Landing Page

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:

you can’t nest css rules, your result is that they not work

also, remove the style tags from the css file, that will also cause stuff to not work

i tried removing the style tags and it disorganized the work, the header img and the contents are now overlapping

and sorry, i dont understand what you mean by nest css rules, do you mean with the curly brackets, { }

this isn’t possible in CSS, you need special libraries for that

you can’t do this for example

and if you remove the style tags and something doesn’t work, it just means you need to adjust your css

i have removed it severally, i just don’t know what works, how do i adjjust my css?

so what exactly im i supposed to write?

selector selector {
property: value 
}

you can check the docs to know what is possilbe and what isn’t CSS: Cascading Style Sheets | MDN (mozilla.org)

You can watch how kevin powell does css neatly in this video

Pls how can i make my nav-bar to remain at the top of my viewport?

withposition and top, the right combination of the two

I’m so sorry, i didn’t understand you, can i see an example of what it shld look like

We don’t type code. Please type what is your latest attempt, and what you have expected to happen