Contain navbar links to content container when resizing window - html

Question

I have a bootstrap navbar that I need to span the entire width of the screen, but have the logo and link at the right stay the consistent width of the container below it, as illustrated below, and not have the LINK on the right jump to the logo and logo shoved to the left below 768px when shrunk down:
[=============LOGO------------------------------------------LINK=============]
| |
| |
| |
When the user downsizes the screen, the navigation items should remain inline with the content below.
<nav class="navbar navbar-default">
<ul class="nav nav-justified centered">
<li><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="140" height="40">
</li>
<li><a class="getapp" href="#">LINK</a>
</li>
</ul>
</nav>
<div class="container">
CONTENT
</div>
.navbar {
background-color: #000;
}
.centered {
width:100%;
margin:0 auto;
}
.nav>li{
display:table-cell;
}
JSFIDDLE: LINK

Answer 1

I found a simple solution by setting the outer div of the nav and the content container to use .inside which contains the nav and content to the same width. When the window is resized, the navigation and page content grow and shrink at the same rate.
<nav>
<div class="inside">
<div class="logo">
<img src="logo.png">
</div>
<div class="links">
<img src="image.png">
</div>
</div>
nav{
position: fixed;
top: 0;
height: 70px;
width: 100%;
background: #000;
z-index: 99999;
}
.logo{
float: left;
padding-top: 15px;
}
.links{
float: right;
line-height: 50px;
padding-top: 20px;
padding-right: 15px;
}
.inside{
width: 90%;
margin: 0 auto;
}