Responsive Web Design Projects - Build a Product Landing Page

Tell us what’s happening:
I got almost everything correct except these 3 last topics:

–>Your #nav-bar should always be at the top of the viewport<–
–>Your Product Landing Page should use at least one media query<–
–>Your Product Landing Page should use CSS Flexbox at least once<–

What else do i have to put/remove in this code ? I do not know where is my mistake. If anyone would help, i’ll be thankfull

/* file: index.html */
<header id='header'>
  <div class='logo'>
  <img id='header-img' src=''>
  <svg viewBox="0 0 342 35" xmlns="http://www.w3.org/2000/svg"><path d="M0 .1a9.7 9.7 0 007 7h11l.5.1v27.6h6.8V7.3L26 7h11a9.8 9.8 0 007-7H0zm238.6 0h-6.8v34.8H263a9.7 9.7 0 006-6.8h-30.3V0zm-52.3 6.8c3.6-1 6.6-3.8 7.4-6.9l-38.1.1v20.6h31.1v7.2h-24.4a13.6 13.6 0 00-8.7 7h39.9v-21h-31.2v-7h24zm116.2 28h6.7v-14h24.6v14h6.7v-21h-38zM85.3 7h26a9.6 9.6 0 007.1-7H78.3a9.6 9.6 0 007 7zm0 13.8h26a9.6 9.6 0 007.1-7H78.3a9.6 9.6 0 007 7zm0 14.1h26a9.6 9.6 0 007.1-7H78.3a9.6 9.6 0 007 7zM308.5 7h26a9.6 9.6 0 007-7h-40a9.6 9.6 0 007 7z" fill="currentColor"></path></svg>
   </div> 
  <nav id='nav-bar'>
    <ul>
      <li><a class='nav-link' href='#models'>Model S</a></li>
      <li><a class='nav-link' href='#model3'>Model 3</a></li>
      <li><a class='nav-link' href='#modely'>Model Y</a></li>
      <li><a class='nav-link' href='#modelx'>Model X</a></li>     
    </ul>    
  </nav>  
</header>

<form id='form' action='https://www.freecodecamp.com/email-submit'>
  <p>Enter your email adress to receive more information about Tesla</p>
  <input id='email' type='email' placeholder='Email' name='email'/>
  <input id='submit' type='submit'/>  
</form> 

<section id='models'>
  <iframe id='video' src="https://www.youtube.com/embed/9AhqDiARQMQ" title="Essentials | Model S" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id='model3'>
  <iframe src="https://www.youtube.com/embed/Q4VGQPk2Dl8" title="Tesla Unveils Model 3" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id='modely'>
  <iframe src="https://www.youtube.com/embed/Tb_Wn6K0uVs" title="Model Y Unveil" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id='modelx'>
  <iframe src="https://www.youtube.com/embed/JFOOo3hEjw8" title="Essentials | Model X" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
/* file: styles.css */
body{
font-family: 'Roboto Condensed', sans-serif;
padding: 0 10px;
}

header{
position: sticky;
top: 0;
display: flex;
justify-content: space-between; /*Element goes to the top, in the middle*/
}

@media(max-width: 768px0){
header{
  flex-direction: column;
      }
}


svg{
width: 300px;
}

ul{
display: flex;
list-style: none /*Tira os pontos da lista*/
}

a{
color: black;
text-decoration: none; /*Remove a parte sublinhada*/
margin-right: 10px;
}

form{
text-align: center;
margin-bottom: 20px;
}

input{
padding: 10px;
border-radius: 10px;
}

section{
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /*16:9 Aspect ratio (divide 9 by 16 = 0,5625*/  
margin-bottom: 20px;
}

iframe{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right:  0;
width: 100%;
height: 100%;
}
  **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:

It doesn’t look like you linked your css to the html.

Make sure to reread the directions at the bottom more carefully because it provides the code on how to link the stylesheet to the html document.

Hope that helps!

Thank you, that was it. Now it works perfectly