title: Responsive website: How to get rid of horizontal scroll bar?
body: <p>I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you scrolling horizontally. I can remove the horizontal scroll by adding <code>overflow-x: hidden</code>. But it will not work on mobile devices such as iPhone and iPad.</p>
  
  <p>So, I tried to add <code>min-width</code> because it will help to get rid of empty space. But I can't put <code>min-width</code> on full.css (e.g. <code>min-width:1000px;</code>) because it will set to full-width - see example below:</p>
  
  <p>full.css </p>
  
  <pre><code>#wrapper {
      width: 1000px;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>responsive.css (less than 1000px)</p>
  
  <pre><code>#wrapper {
      width: 100%;
      margin: 0;
  }
  </code></pre>
  
  <p>I was wondering if you know how to fix this issue? Let me know if you have a better option for it. Or should I create a new wrapper id?</p>