Landing page-nav link problem

i used nav-link class in my code, and its fine. it takes the navs to the right-top corner of the page. but the test of free code camp ask me to use the nav-link class in each a herf. when i do it all the navs gathers on the same corner but on each other and its not readable. can you please explain me how to do it correctly?

https://codepen.io/Guysharon2202/pen/qGXWme

The nav-link class needs to be on the <a> elements.

yes but when i do it the nav items start to align in a really wierd way…

I believe the issue you’re having is that you’re using an unordered list within your nav tag. In html5 it isn’t necessary to do this. Try removing the ul and li tags and see if this resolves your issue.

<nav id="nav-bar" class="nav-link">
      <a href="#form">Features</a>
      <a href="#video"> how it works</a>
      <a href="#form">Pricing</a>
    </nav>

Well that is because of the CSS you have on the nav-link class. Move that CSS to a different selector like the nav-bar id and then remove it from the nav-link selector.

/* Move it to this selector */
#nav-bar {
  position: fixed;
  top: 0px;
  right: 0px;
}