title: What is wrong with this code to affix the top navigation bar?
body: <p>How do I affix an element? I have searched for weeks and found many tutorials and examples that all either have some java script or say to set data-spy to affix and set data-offset-top to the amount of pixels to scroll before fixing the element. I have tried it all and none of it works, the top navigation bar does not become fixed. Am I forgetting some CSS or something?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  #topDiv {
      width:100%;
      height:75px;
      padding:15px;
      position:relative;
      background-color:grey;
      margin-0;
  }
  
  .topNavContainer {
      height:71px;
      background-color:#8AC007;
      position:absolute;
      width:100%;
      margin-left:auto;
      margin-right:auto;
      margin-top:0 !important;
      z-index:999;
  }
  
  .topNavLinks {
      text-align:center;
      line-height:71px;
      width:auto;
      margin:auto;
  }
  
  .topNavLinks a {
      display:inline-block;
      padding-left:15px;
      padding-right:15px;
  }
  
  .topNavLinks a:hover {
      color:#8AC007;
      background-color:#ffffff;
      text-decoration:none;   
  }
  
  #Main {
      padding:0;
      position:relative;
      width:85%;
      height:1900px;
      background-color:black;
      margin-left:auto;
      margin-right:auto;
      margin-top:71px;
  }
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="topDiv"&gt;
  &lt;h2&gt;This is the Top Section&lt;/h2&gt;
  &lt;/div&gt;
  
  &lt;div data-spy="affix" data-offset-top="75" class="topNavContainer"&gt;
  &lt;div class="topNavLinks"&gt;
  &lt;a href="#"&gt;Home&lt;/a&gt;
  &lt;a href="#"&gt;Section 3&lt;/a&gt;
  &lt;a href="#"&gt;Section 2&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="Main"&gt;
  &lt;h1 style="color:white;"&gt;
  This is the Body
  &lt;/h1&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>