You should do it the other way around, something like..
<nav class="nav navbar-default">
<div class="container">
//content
</div>
</nav>
This way, your <nav>
won't be affected by your width change, and all the inner content will be.
If you absolutely need to have it the way you structured it... do something like:
<div class="container">
<header>
<nav class="nav navbar-default">
<div class="container container-width">
//content
</div>
</nav>
</header>
</div>
.container-width {
width: 99%;
}
This way, you are not modifying bootstrap grid structure across the board (which can cause you many headaches down the road), and instead you are applying your custom width to your one element (and since it is a class, you can add this same class to any other container to modify that as well.)