Bootstrap align navbar items to the right

How do I align a navbar item to the right?

I want to have the login and register on the right.However, nothing I try seems to work.

This is what I have tried so far:

• <div> around the <ul> with the attribute: style="float: right"
• <div> around the <ul> with the attribute: style="text-align: right"
• tried those two things on the <li> tags
• tried all those things again with !important added to the end
• changed nav-item to nav-right in the <li>
• added a pull-sm-right class to the <li>
• added a align-content-end class to the <li>

This is my code:

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