title: Centering a sticky navigation bar and extending the border using affix bootstrap
body: <p>I've recreated the issue I am having here:
  <a href="https://jsfiddle.net/DTcHh/10279/" rel="nofollow">https://jsfiddle.net/DTcHh/10279/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*main-navigation*/
  /*view the list as a whole*/
  .nav ul{
   list-style: none;
   background-color: #292929;
   text-align: center;
  }
  
  /*properties of each list item independently*/
  .nav li {
   font-family: proximanova-regular-webfont;
   font-size: 30px;
  
   /*display in horizontal order*/
   display: inline-block; 
  }
  
  
  .nav a {
   text-decoration: none;
   color: #FFFFFF;
   display: block;
   
   padding-right: 60px;
   padding-left: 60px;
   
   padding-top: 30px;
   padding-bottom: 30px;
  }
  
  
  
  .nav a:hover, .nav a:focus,.nav a:active , #mainnav a.thispage{
   text-decoration: none;
   background-color: #FFFFFF;
   color: #292929;
   -o-transition:.675s;
   -ms-transition:.675s;
   -moz-transition:.675s;
   -webkit-transition:.675s;
   transition:.675s;
  }
  
  #main p {
   font-family: "proximanova light";
   color: #000000;
   font-size: xx-large;
   text-align: center;
   width: 44%;
   margin-left: 50%;
   margin-right: auto;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="link_affix"&gt;
      &lt;div data-spy="affix" data-offset-top="0"&gt;
          &lt;div class="nav"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="index.html" class="thispage"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="resume.html"&gt;RESUME&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="projects.html"&gt;PROJECTS&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="contact.html\n"&gt;CONTACT &lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt; 
   &lt;/div&gt; &lt;!-- affix --&gt;
  &lt;/div&gt;
  
  
  &lt;article id="main"&gt;
    &lt;p&gt;
  example textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample 
  &lt;/p&gt;
  
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My goal is to achieve two things:</p>
  
  <ol>
  <li><p>Center the text and navigation bar.</p></li>
  <li><p>Extend the border towards both ends of the window. (just as stackexchange does).</p></li>
  </ol>
  
  <p>I've done my research and tried many things, but to no avail. I'd appreciate the help.</p>