bootstrap scroll and fixed navbar - buggy on container class?

I want to fix the navbar when you scroll the page up like this example.

It is fine when you use .container-fluid but it is not when you use .container.

CSS:

  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }

HTML:

<div class="container" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<div class="container">
    <nav class="navbar navbar-default" data-spy="affix" data-offset-top="197">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Basic Topnav</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </nav>
</div>


<div class="container" style="height:1000px">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

Result:

Any ideas how to fix this?

This should solve it: Add the affix data-spy to the container holding the nav

HTML:

<div class="container" data-spy="affix" data-offset-top="197">
 <nav class="navbar navbar-default">
   <ul class="nav navbar-nav pull-right">
     <li class="active"><a href="#">Basic Topnav</a></li>
     <li><a href="#">Page 1</a></li>
     <li><a href="#">Page 2</a></li>
     <li><a href="#">Page 3</a></li>
   </ul>
 </nav>
</div>