Help with nav bar please!

Need help with keeping nav bar on top of the viewport

this is my page so far



<main>
<!DOCTYPE html>
  <!---Nav bar---> 
    <header id="headerone">
   <nav id="nav-bar" class="shift" 
  <ul>
  <li><a class="nav-link" href="home">Home</a></li>
  <li><a class="nav-link" href="about" href="#About">About</a></li>
  <li><a class="nav-link" href="services" href="#Services">Services</a></li>
    <li><a class="nav-link" href="contact" href="#contact">Contact</a></li>    </header>
  </ul>
  </nav>
  </header> 
<!---header--->
<header id="header" class="navbar">
  LUXS, BEVERLY HILLS</header> 
<header>```

Setting top and left to 0 would do the trick, but i guess the test requires the #nav-bar as fixed not the header.

Also you forgot to close this tag ,

<nav id="nav-bar" class="shift"

It’s not necessary to set margin-right: 75%;. You could use just a margin: 0 auto;

#nav-bar{
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%; 
  background: linear-gradient(to bottom, #c4962d 0%, #000000 50%);
}

so i closed the open tag and i added and id=nav-bar but now it stretches across the screen and still does not pass

#nav-bar{
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%; 
  background: linear-gradient(to bottom, #c4962d 0%, #000000 50%);
}

thanks, so i set the margin 0 auto and added and id for the nav bar with above code but it still is not passing

If you mean that the text overlaps your navbar, then you could use z-index: 1; as a #nav-bar style

  1. The navbar should always be at the top of the viewport.
    #header or one of its children should be at the top of the viewport even after scrolling

Give your <header> an id=“header”, it requires an element with this id within the fixed positioned element.

Since you have another element with this same id, i would suggest to switch those id's

  <li><a class="nav-link" href="about" href="#About">About</a></li>
  <li><a class="nav-link" href="services" href="#Services">Services</a></li>
    <li><a class="nav-link" href="contact" href="#contact">Contact</a></li>

Why do you set href="" two times.? Remove one, the challenge requires to navigate to the corresponding section within the page when the link is clicked