title: I can't extend a div in the correct direction with jquery?
body: <p>I have a large header with a navigation bar within it. Once you reach the base of the header, the navigation bar becomes fixed at the top by itself leaving the header to scroll behind along with the remaining content. It snaps back into the header when you scroll up again. The functionality is perfect. I have two questions...</p>
  
  <ol>
  <li><p>When it snaps at the top of the screen it becomes centered (which IS what I want), but it is only 500 pixels or so wide and I want the white background to extend beyond the buttons one either side to reach the edges of body (960px in width). When I changed the width, it only extended from the right hand side which then caused it to overlap off the edge of the page.</p></li>
  <li><p>Even though it appears to be centred I am convinced that it is off by about 30 odd pixels. It may be a padding or margin setting???</p></li>
  </ol>
  
  <p>THE WEIRDEST THING THOUGH, ONCE I PLACED THE CODE ONTO A WEB-SERVER FOR YOU TO TEST, THE NAVIGATION BAR DOESN'T CENTRE PROPERLY LIKE IT DOES WHEN I OPEN THE HTML FILE IN MY BROWSER... SO THERE'S A THIRD QUESTION? HOW DO I STOP IT FROM DOING THAT?</p>
  
  <p>Thanks you and please help :)</p>
  
  <p>The code is below but if you'd like to see it in action you may visit here (<a href="http://www.justletmeusethisnameplz.co.nf/" rel="nofollow">http://www.justletmeusethisnameplz.co.nf/</a>).</p>
  
  <p>Here is the relevant HTML</p>
  
  <pre><code>&lt;div class="header"&gt; &lt;!-- BEGINNING OF HEADER --&gt;
  
      &lt;div id="logo"&gt; &lt;!-- BEGINNING OF LOGO --&gt;
  
      &lt;h1 class="sliding-middle-out"&gt;Hi&lt;/h1&gt;
  
      &lt;/div&gt; &lt;!-- END OF LOGO --&gt;
  
      &lt;div id="navigation"&gt;  &lt;!-- BEGINNING OF NAVIGATION --&gt;
  
      &lt;div style="float:right"&gt; &lt;!-- BEGINNING OF IDK --&gt;
  
      &lt;div id="slider"&gt;&lt;/div&gt;
      &lt;a href="index.html"&gt;&lt;div id="one" class="item"&gt;&lt;div class="inside"&gt;Home&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;a href="about.html"&gt;&lt;div id="two" class="item"&gt;&lt;div class="inside"&gt;About Us&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;a href="content.html"&gt;&lt;div id="three" class="item"&gt;&lt;div class="inside"&gt;Content&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;a href="contact.html"&gt;&lt;div id="four" class="item"&gt;&lt;div class="inside"&gt;Contact&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  
      &lt;/div&gt; &lt;!-- END OF IDK --&gt;
  
      &lt;/div&gt; &lt;!-- END OF NAVIGATION --&gt;
  
      &lt;/div&gt; &lt;!-- END OF HEADER --&gt;
  </code></pre>
  
  <p>Here is the relevant CSS</p>
  
  <pre><code>.header{
          height:100px;
          width:960px; 
          float:left;
          background-color:white;
        }
        #navigation{
          height:40px;
          font-size:20px;
          color:black;
          font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
          float:right;
          background-color:white;
          padding-top:5px;
          position:relative;
        }
        #navigation.stick{
          height:40px;
          font-size:20px;
          color:black;
          font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
          float:left;
          background-color:white;
          padding-top:5px;
          position:fixed;
        }
        .logo{
          height:100px;
          width:425px; 
          float:left;
        }
  </code></pre>
  
  <p>Here is the relevant JavaScript/ JQuery</p>
  
  <pre><code>&lt;script type="text/javascript" src="./jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./jquery-latest.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  $(document).on("scroll", function(){
      if($(document).scrollTop() &gt; 1){
      $('#navigation').addClass("stick");
      }else{
      $('#navigation').removeClass("stick");
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>AND YES I AM AWARE OF CALLED UPON MANY JQUERY LIBRARIES.</p>