Product-landing page error

@media only screen and (max-width: 600px) {

  

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
 
  header{
  position: fixed;
    display:flex;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}`<header id="header"><img id="header-img" src="https://fimgs.net/mdimg/dizajneri/o.160.jpg">
 <nav id="nav-bar">
   
   <ul>
  <li><a href="#home" class="nav-link">Home</a></li>
  <li><a href="#news" class="nav-link">News</a></li>
  <li><a href="#contact" class="nav-link">Contact</a></li>
  <li><a href="#about" class="nav-link">About</a></li>
   
</ul>
    
  </nav>
  </div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/GBsYuJtMXqE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
</header>
</div>


<body>
 
  <div id="home"></div>
  <div id="news"></div>
  <div id="contact"></div>
  <div id="about"></div>
  
  
  
</body>

<footer><form id ="form" action=" https://www.freecodecamp.com/email-submit">
  <input type="email" name="email" placeholder="Enter A Email" id="email">
  <input type="submit" name="submit" id="submit" action=" https://www.freecodecamp.com/email-submit" >
</form></footer>`

My image is big with a whit background but the changes I made to the nav do not show and I’m stuck . Thanks in advance

It’s easier to provide help if you give a link to your pen rather than a code snippet and a screenshot.

https://codepen.io/_Unkown/pen/ZEeepzq

Line one in the CSS editor has a media query that’s not closed so the rest of the selectors are not being seen.

Side note, if you click the generic reply button I do not get notified that you’ve responded.
If you click the reply link in my post I’ll get notified.
Another way to ensure that I (or any user you reply to) get notified of your response is to mention their @Name. For instance, I’m @Roma

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.