title: Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
body: <p>I have a website <a href="http://02b23fa.netsolhost.com/wordpress1/">here</a>.</p>
  
  <p>Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the <code>body</code> has <code>overflow-x:hidden</code>.  </p>
  
  <p>In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page.  As far as I can tell, this whitespace isn't even a part of the <code>html</code> or <code>body</code> tags. </p>
  
  <p>Even if I set the viewport to a specific width in the <code>&lt;head&gt;</code>:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=1100, initial-scale=1"&gt;
  </code></pre>
  
  <p>The site expands to the 1100px but still has the whitespace beyond the 1100.  </p>
  
  <p>What am I missing?  How do I keep the viewport to 1100 and cut off the overflow?</p>