Change the bootstrap's navbar so that links occupy the whole space - css

Question

I am using bootstrap 3x. I have the following navbar :
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="nav-secondary">
<ul class="nav nav-pills nav-justified">
<li style="border: 1px solid grey">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
When I use the container class - <div class="container"> I get a lot of padding which in bigger resolution looks even worse and even though I use nav-justifed it's like the menus are centered. This screenshot can make it more clear
But I want to avoid this padding and let the menus occupy the whole space like this :
The second image is when the <div class="container"> is commented. I guess the padding that I still get is from the .navbar class but it's still better. But I wonder - is it ok to remove the <div class="container"> from the navbar, because to me it doesn't seem like very good idea (may be wrong though). Also I'm still getting padding so my questions are:
Is it ok to remove the <div class="container">?
Can you help with a CSS based solution which I think will be better here?
Edit:
PrintScreen with changed width:

Answer 1

The .container class is enforcing both a responsive static width, which is causing this behavior, but it's also providing framework consistent padding on both sides and automatically calculated margins (margin-left: auto; margin-right: auto). Removing it isn't a great idea.
Understand that restricting the width (generally via max-width) is usually desirable, as justifying your navigation without it may not work well on larger screens (e.g. 27" Thunderbolt display). That said, if you're sure about your approach, you can extend the core by adding a .full-width class to that container, then target .container.full-width and set width: auto. Be sure to do all of this in a separate stylesheet, though, rather than modifying Bootstrap's core:
HTML
<div class="navbar" role="navigation">
<div class="container full-width">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="nav-secondary">
<ul class="nav nav-pills nav-justified">
<li style="border: 1px solid grey">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
CSS
.container.full-width {
width: auto;
}
Because you're overriding the core, you may also want to add !important to avoid issues of specificity, although the Codepen below doesn't indicate a need for it. Just keep it in mind.
Finally, using Bootstrap's justified nav feature is noted as having issues in current versions of Chrome and Safari, so you may want to think twice before using it.
Here's a codepen.

Answer 2

make use the class 'container-fluid'
look:
<div class="navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="nav-secondary">
<ul class="nav nav-pills nav-justified">
<li style="border: 1px solid grey">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>