title: Navbar (pull-left / pull-right) doesn't align with following div elements
body: <p>The navbar doesn't align properly to the left and right-hand margin of my website. I am using Bootstrap's 'pull-left' &amp; 'pull-right' functions.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Microbiology Bootstrap!&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="nav"&gt;
      &lt;div class="container"&gt;
        &lt;ul class="pull-left"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="pull-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;By Industry&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;By Matrix&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;By Vial&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;All Studies&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="jumbotron"&gt;
    &lt;div class="container"&gt;
      &lt;h1&gt;Microbiology &lt;br&gt;Bootstrap&lt;/br&gt;&lt;/h1&gt;
      &lt;p&gt;Find the validation study you need. &lt;br&gt;Search by industry, matrix or vial.&lt;/br&gt;&lt;/p&gt;
    &lt;a href="#"&gt;Learn More&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.nav {
    background-color: #efefef;
  }
  
  .nav a {
    color: #5a5a5a;
    font-size: 12px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
  }
  
  .nav li {
    display: inline;
  }
  </code></pre>
  
  <p><strong>Illustration:</strong></p>
  
  <pre><code>    Home | Contents       By Industry | By Matrix | By Vials etc
  
  Microbiology
  Bootstrap
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>