Bootstrap 4 Center Navbar Brand and Links

Question

So right now I have the basic setup with my nav brand on the left side and the links on the right. What I would like is to center all of it and have the Nav brand above the links. So ideally it would look like this

                                     Brand
                           link link link link link

Ive tried following what it says on bootsrtap but maybe its not working because thats now on alpha6 and I'm using alpha3.

Here is my navbar.html.erb

<nav class="navbar navbar-dark">
 <div class="container">
    <button type="button" class="navbar-toggler hidden-lg-up"
      type="button"
      data-toggle="collapse"
      data-target="#nav-content">
       &#9776;
    </button>
       <a class='navbar-brand' href='/'>
          <span><%= image_tag("logo_white_background", :size => '30x30', :alt => "Test" ) %></span>
          <span class='light'>Test</span>
        </a>
    <div class="collapse navbar-toggleable-md" id="nav-content">
        <ul class="nav navbar-nav pull-xs-right">
            <li class="nav-item">
              <%= link_to 'Home', root_path, class: "nav-link #{yield(:blog_active)}" %>
            </li>
            <li class="nav-item">
              <%= link_to 'Test', tag_path("test"), class: "nav-link #{yield(:test_active)}" %>
            </li>
            <li class="nav-item">
              <%= link_to 'Test', tag_path("test"), class: "nav-link #{yield(:test_active)}" %>
            </li>
            <li class="nav-item">
              <%= link_to 'Test', tag_path("test"), class: "nav-link #{yield(:test_active)}" %>
            </li>
    </div>
</div>
</nav>

This is my nabber.scss (not including things like font and color

@media(max-width:61.9em) {
.navbar .navbar-brand {float:none;display:block;}
.navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
.navbar .navbar-nav {float:none !important;}
.nav-item{width:100%;text-align:left;}
}