Stop button going full width and keep navbar icon to the left - css

Question

When the screen size is moved to sm, then the logout button width takes up the whole screen and the nav bar hamburger icon goes in the middle:
This is how it looks when it's normal:
Here is the code for it:
<!-- navbar -->
<nav class="navbar navbar-toggleable-sm bg-info navbar-inverse">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Training</a>
<a class="nav-item nav-link" href="#">LOGOUT</a>
</div>
</div>
</div>
Logout
</nav>

Answer 1

check out that code. It works
#media(max-width:777px){
.btn-danger{
max-width:70px!important;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-sm bg-info navbar-inverse">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Training</a>
<a class="nav-item nav-link" href="#">LOGOUT</a>
</div>
</div>
</div>
Logout
</nav>
here you also have it on codepen.io
https://codepen.io/hansfranz/pen/owmVod
What I did was setting up a media Query here you can define the behavior for a specific width.
Hope that helps if not leave a comment :)

Answer 2

Using flexbox to organize the layout.
#media screen and (max-width:640px) {
nav.navbar,
.container {
display: flex;
justify-content: flex-start;
align-items: center;
margin: 0!important;
}
nav .btn.btn-danger {
margin-left: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- navbar -->
<nav class="navbar navbar-toggleable-sm bg-info navbar-inverse">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Training</a>
<a class="nav-item nav-link" href="#">LOGOUT</a>
</div>
</div>
</div>
Logout
</nav>

Answer 3

You should not leave the logout link outside the navbar div. Here is an example that could help.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link Button</li>
</ul>
</div>
</div>
</nav>