How to control navbar spacing? - html

Question

I would like my navbar elements to not take up the width of the whole page. I've done research to try find the best way to do this but I get a load of different solutions. I would like my navbar to have space either side, but for the page to remain at the full width, whilst also having the brand on the left and the links on the right. What is the best way to handle the width of the navbar and the spacing of its elements?
HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="col-lg-12 navigation">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsed" 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>
<a class="navbar-brand" href="#">
<span><img src="images/brand.png" width="50" height="50" alt=""></span>Logo
</a>
<div class="collapse navbar-collapse" id="navbar-collapsed">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</div>
</nav>
CSS
.navbar {
background-color: cyan;
text-align: center;
width:100%;
}
Image of what i have and want:
After suggested changes:

Answer 1

Is this what you want?, Open the snippet in fullscreen mode.
I have wrapped the navbar with a container class
And also added pull-right class to navbar-collapsed to push the links to right.
As the the rest of the page, wrap your content inside container-fluid
Basically container class has fixed width depending on the width of browser and
container-fluid takes full width of browser
body {}
.navbar {
background-color: cyan;
text-align: center;
width: 100%;
}
.navbar-brand {
padding:4px!important;
float:none !important;
}
.navbar-brand img {
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default">
<div class="col-lg-12 navigation text-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsed" 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>
<a class="navbar-brand" href="#">
<span><img src="https://placehold.it/100x100" width="40" height="100" alt=""></span>Logo
</a>
<div class="collapse navbar-collapse pull-right" id="navbar-collapsed">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container-fluid">
Rest of page content
</div>