Ember-Bootstrap Navigation Item Float-Right

I'm currently using Ember-Bootstrap (Bootstrap 4 alpha) and would like to separate one navigation item that basically does a pull-right (was phased out with Bootstrap 4 to float-right).

A barebones Bootstrap example of what I want to accomplish:

<nav class="navbar navbar-default navbar-relative-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a>LEFT ITEM</a></li>
            <li><a>LEFT ITEM</a></li>
            <li><a>LEFT ITEM</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
                  <li>RIGHT SIDE ITEM</li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

However, when I add the class float-right, navbar-right or justify-content-end to the LOG IN navigation item, there is no change in it's position of floating left by default.

I also tried using the classes to #nav.item as well as the #nav.link-to.

Float-Right will only work on the Toggle Component, but not any of the navigation items. What am I missing?

My code:

  <div class="navbar-header">
    <img class="nav-logo" src="/assets/images/nav-logo.svg" />
    <div class="float-right">
      
    </div>
  </div>
  
    
      ITEM 1
      ITEM 2
      ITEM 3

      LOG IN