Nav-bar won't align to the right

HTML-CSS
1

Product Landing Page

My #nav-bar won’t align to the right even when I use justify-content: space-between; for the parent element

this is the parent element

#header {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap:wrap;
  align-items:center;
}
2

You have invalid syntax in the nav

You have:

<nav id="nav-bar">
  <a class="nav-link" href=""><u>MAIN</></a>
  <a class="nav-link" href=""><u>PRODUCTS</u></a>
  <a class="nav-link" href=""><u>ABOUT US</u></a>
</nav>

Should be:

<nav id="nav-bar">
  <a class="nav-link" href="">MAIN</a>
  <a class="nav-link" href="">PRODUCTS</a>
  <a class="nav-link" href="">ABOUT US</a>
</nav>

Or if you want to use a UL

<nav id="nav-bar">
  <ul>
    <li><a class="nav-link" href="">MAIN</a></li>
    <li><a class="nav-link" href="">PRODUCTS</a></li>
    <li><a class="nav-link" href="">ABOUT US</a></li>
  </ul>
</nav>
1 Like