how to affix a boxed navbar - html

Question

Im using affix to make fixed my navbar when scroll.
But when scroll navbar is not working fine.
I use <header class="container"> to give a boxed look to header website, an center content.
if I would use header without container, header and menu would fit screen side-to-side. In this case the affixed navbar would work fine, fitting screen in the same way (taking 1391px width).
However Im using <header class="container">. And affixed navbar runs out of screen because is taking 1391px width too. Like if it were a side-to-side looked website. It does not adapt to container width.
Do you know how to solve it?
or
is it that bootstrap affix is desing just for stretched sites and no boxed sites?
This is my HTML for nav
<header class="container">
<nav id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="222">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">Home</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><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="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown" class="dropdown">Nosotros <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>Misión, Visión y Objetivos
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
and this is css
header{
border-top-width: 8px;
border-top-style: solid;
border-top-color: #888;
}
.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
right: 10%;
left: 10%;
}
.affix + .container-fluid {
padding-top: 70px;
}
Take a look here it is similar to what is happening to me. Make result screen smaller and bigger to see what happens

Answer 1

Without codes, I can only assume how your codes look like.
Using twitter bootstrap's navbar fixed navbar example, you need to change .navbar-fixed-top right and left values. Using 0 sets it from side to side.
#media (min-width: 768px) {
.navbar-fixed-top {
position: fixed;
right: auto;
left: auto;
}
}
After that, to make them all align, you would have to overwrite bootstrap's margins (for eg .navbar-right of you have that, etc).
See the fiddle: https://jsfiddle.net/jennift/o7utddud/2/

Answer 2

On a larger screen, you want the #nav.affix to follow the container size. Using 0 on left and right, uses the container as a guide, "stretching" it only as wide as the container.
On a smaller screen, the container now has the width of "auto" and with a fixed position it will stretch left to right. Using a padding of 20px (as used by the bootstrap css), you can realign it to the length of the header container.
#nav.affix {
position: fixed;
top: 0;
left:0;
right:0;
}
#media (max-width: 767px) { /*controls on smaller screen*/
#nav.affix {
left:20px; /*20px to follow bootstrap body padding */
right:20px;
}
}
Fiddle: http://jsfiddle.net/jennift/hnkutxsn/3/