# Sending \<li\> to the right with navbar

**URL:** <https://forum.freecodecamp.org/t/sending-li-to-the-right-with-navbar/111501>\
**Category:** General\
**Created:** [May 2, 2017, 3:23pm UTC](https://forum.freecodecamp.org/t/sending-li-to-the-right-with-navbar/111501 "2017-05-02T15:23:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![HeyCenturies](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/heycenturies/32/49836_2.png) [@HeyCenturies](https://forum.freecodecamp.org/u/HeyCenturies)\
**Post date:** [May 2, 2017, 3:23pm UTC](https://forum.freecodecamp.org/t/sending-li-to-the-right-with-navbar/111501/1 "2017-05-02T15:23:16Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![matty22](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/matty22/32/7665_2.png) [@matty22](https://forum.freecodecamp.org/u/matty22)\
**Post date:** [May 2, 2017, 4:00pm UTC](https://forum.freecodecamp.org/t/sending-li-to-the-right-with-navbar/111501/2 "2017-05-02T16:00:33Z")

</div>

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

```auto
.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/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:57pm UTC](https://forum.freecodecamp.org/t/sending-li-to-the-right-with-navbar/111501/3 "2021-01-17T20:57:10Z")

</div>

Closed on January 17, 2021, 8:57pm UTC