title: Fixed Positioned Div is extending outside of HTML & Body
body: <p>I have a responsive site I'm working on and when you go below 800px wide the menu becomes fixed at the top with a toggle drop down menu.</p>
  
  <p>What's happening is that the div is extending outside of the HTML and Body area and making add a sideways scrollbar. I'm not sure how to get around this.</p>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p>Here is my code</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="navMobile"&gt;
  &lt;div class="menuBox"&gt;
  &lt;div class="navMobileBtn"&gt;&lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/img/menuBtn.png" /&gt;&lt;/div&gt;
  &lt;ul class="navMobileBox"&gt;
    &lt;li&gt;&lt;a class="location" href="#"&gt;Location&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="building" href="#"&gt;Building&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="space" href="#"&gt;Space&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="links" href="#"&gt;Links&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="contact" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navMobile {display:block;}
  
  .navMobile {
      height:auto;
  }
  
  .navMobile .menuBox {
      height:auto;
      min-height:40px;
      width:100%;
      display:inline-block;
      position:fixed;
      top:0;
      left:0;
      right:0;
      background:#fff;
      z-index:99999;
  }
  
  .navMobile .menuBox ul {
      display:block;
      clear:both;
      height:auto;
      width:100%;
      padding:0;
      margin:0;
      border-top:1px solid #eee;
      font-family: "proxima-nova";
  }
  
  .navMobile .menuBox ul&gt;li {
      display:block;
      clear:both;
      padding:10px 0;
      text-align:center;
      border-bottom:1px solid #eee;
  }
  
  .navMobile .menuBox ul&gt;li a {
      padding:0;
      margin:0;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color:#ccc;
      font-size: 0.9em;
      font-weight:500;
      opacity: 1;
  }
  
  .navMobile .menuBox ul&gt;li a:hover,.mainnav ul&gt;li a:focus {
      text-decoration: none;
  }
  
  .navMobile .menuBox ul&gt;li:last-child a {
      margin-right: 0;
      padding-right: 0;
  }
  
  .navMobileBtn {
      clear:both; 
      height:40px;
      width:40px;
  }
  </code></pre>