Hi,

(Sorry if question was asked/answered before, but couln't find a search function here.)

I'm building a website with Bootstrap 3.3.2 and want to implement a nav-sticky-after-scroll functionality using Bootstrap's affix.
There are lots of examples to be found via Google or in Stackoverflow, but they all have a navbar of 100% width.
That's not the case for my website, which is defined like this:

@media (min-width: 768px) {
header, footer, nav {
width: 750px;
}
}
...
header, footer, nav {
margin-right: auto;
margin-left: auto;
}

HTML:
<header>Header logo etc.</header>
<!-- Begin Navbar -->
<nav id="nav" class="navbar navbar-inverse navbar-static-top">
Navigation code
</nav><!-- /.navbar -->
<!-- Begin Body -->
<div class="container">
Content
</div>
Adding the nav-sticky-after-scroll functionality:
CSS:
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}

JS:
$('#nav').affix({
offset: {
top: $('header').height()
}
});
This will of course bring the navbar to a 100% width after scroll.
If I take off the 'width: 100%' from the '#nav.affix' selector, the navbar keeps its width but jumps to the left of the browser screen.
Even if I enter 'margin: 0 auto;' there doesn't change that behaviour.
How can I overcome this?

Harald