title: Container width not matching viewport width on mobile device
body: <p>I recoded my site for responsive design and set the HTML viewport, javascript, and CSS for the outer container <code>div</code> as shown below. On mobile browsers (Opera and Firefox) I have the following  problem:</p>
  
  <ul>
  <li>In portrait mode (only) the page loads correctly but the window allows scrolling to the right where there is a column of blank space outside the page-container. I can pinch zoom out so that I can see the column of space. Setting <code>minimum-scale=1</code> only prevents the pinch zoom out, but you can still scroll to the right.</li>
  </ul>
  
  <p>Setting <code>overflow-x</code> prevents scrolling to the right but this seems dangerous (If there is data to the right for whatever reason, you want to be able to get to it).</p>
  
  <p>Notes:</p>
  
  <ul>
  <li><p>Landscape mode works correctly. </p></li>
  <li><p>Desktop mode is correct except for a tiny bit of scrolling to the right. The more I zoom in however (viewport approximating mobile and beyond), the more the blank space on the right increases.</p></li>
  </ul>
  
  <p><strong>Any idea why this space to the right and how to get rid of it?</strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>CSS (relevant)</p>
  
  <pre><code>.page-container {
      position: relative;
      width: 100%;
      min-width:240px;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var jmq = window.matchMedia("screen and (max-width: 610px)");
  jmq.addListener(jmqListener);
  
  function jmqListener(jmq){
      if (jmq.matches || window.innerWidth &lt; 611 ) {
          //Mobile or zoomed in desktop - resize controls
          ...
      } else {
          // full desktop site
          ...
      }
  </code></pre>
  
  <p>A picture is worth a thousand words - the extra space is on the right:</p>
  
  <p><img src="https://i.stack.imgur.com/cLoAl.png" alt="screenshot"></p>