Как выровнять элемент навигационной панели вправо?

Я хочу иметь логин и зарегистрироваться справа. Но все, что я пытаюсь, похоже, не работает.

Это то, что я пробовал до сих пор:<div> вокруг<ul> с атрибутом:style="float: right"<div> вокруг<ul> с атрибутом:style="text-align: right"попробовал эти две вещи на<li> тегипопробовал все эти вещи снова с!important добавлено в конецизмененоnav-item вnav-right в<li>добавилpull-sm-right класс к<li>добавилalign-content-end класс к<li>Это мой код:

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>