title: Trying to make nav menu stick at top of screen when scrolling
body: <p>I am working on making my menu stick at the top when scrolling.  I am following an example here: 
  <a href="https://stackoverflow.com/a/1216130/571723">https://stackoverflow.com/a/1216130/571723</a></p>
  
  <p>However my menu is inside a smaller centered div.  The menu gets pushed over to right side of the page when it goes to "stick" at the top.  Here is my fiddle:  <a href="http://jsfiddle.net/edL5F/1/" rel="nofollow noreferrer">http://jsfiddle.net/edL5F/1/</a></p>
  
  <p>How do I make the menu stay inside the container while setting it to fixed?</p>
  
  <p>CSS:</p>
  
  <pre><code>.content-wrapper {
      margin: 0 auto;
      max-width: 800px;
      position: relative;
      background-color: #cccccc;
  }
  
  nav {
      position: absolute;
      right: 0;
      top: 63px;
      margin-top: 5px;
      font-size: 1.3em;
      font-weight: 600;
      list-style:none;
      width:628px;
      margin:5px auto;
      height:43px;
      padding:0px 10px 0px 10px;
      z-index: 10;
  
      /* Rounded Corners */
      /*border-radius: 10px; */
  
      /* Background color and gradients */
      background: #014464;
      background: -moz-linear-gradient(top, #0272a7, #013953);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
  
      /* Borders */
      border: 1px solid #002232;
  
      box-shadow: inset 0px 0px 1px #edf9ff;
  }
  
  div.divBlock {
      margin: 20px 0;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> $(window).scroll(function (e) {
      $el = $('nav');
      if ($(this).scrollTop() &gt; 80 &amp;&amp; $el.css('position') != 'fixed') {
          $('nav').css({ 'position': 'fixed', 'top': '-10px'});
      }
      if ($(this).scrollTop() &lt; 80 &amp;&amp; $el.css('position') == 'fixed') {
          $('nav').css({ 'position': 'absolute', 'top': '63px' });
      }
  });
  </code></pre>