Nav-bar won't align to the right

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 {
  flex-direction: row;
  justify-content: space-between;

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>

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>

Or if you want to use a UL

<nav id="nav-bar">
    <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>
1 Like