Sending <li> to the right with navbar

1

I’m trying to do the portfolio navbar and i did it , but i have no idea how to send those 3 <li> to the right-side. I tried adding a new class with float:right and it becomes a column…

  <!-- Header -->
  <ul class="nav navbar-pills">
    <li class="nav-link">
      <a href="#"> Vitor Medeiros </a>
      </li>
    
  <div class="float-right">
    <li class="nav-link">
      <a href="#"> About Me! </a>
    </li>
    <li class="nav-link">
      <a href="#">Porfolio </a>
      </li>
    <li class="nav-link">
      <a href="#"> Contact </a>
      </li>
  </ul>               
      </div>
      </div>
2

How about giving flexbox a try? Set your container div as a flex container and the justify the flex items to the end.

.float-right {
  display: flex;
  justify-content: flex-end;
}

If you want to learn more about flexbox, this is a really helpful resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1 Like
3