title: Bootstrap Body Overflow - Using overflow-x creates mobile scrolling issues
body: <p>I've more or less finished a simple bootstrap site for a client, however I ran into an issue where the body element seems to have an extra 160px on the right side! I've spent like 3 hours already trying to find an answer.</p>
  
  <p>To partially solve this problem I added the below css to the head: </p>
  
  <p><code>html, body { overflow-x: hidden;}</code></p>
  
  <p>This got rid of the extra 160px however on mobile devices (only tested iOS) the scrolling action is now incredibly sticky - rather than the fluid scroll we expect on a mobile device. Instead of one fast flick of the finger making the page continue scrolling, now when the finger leaves the screen the page stops dead.</p>
  
  <p>In terms of user experience this isn't really acceptable and has been a real pain to try and solve.</p>
  
  <p>I've put the site here for you to try on a mobile to feel the 'stickyness' <a href="http://goo.gl/yEI3rn" rel="nofollow">goo.gl/yEI3rn</a></p>
  
  <p>On desktop you can use inspector to disable the overflow-x:hidden; on the body to see the extra pixels on the right.</p>
  
  <p>If anyone can investigate the site and tell me any one of the following it would be very useful:</p>
  
  <ol>
  <li>Which element in the body is causing the body to have the extra width?</li>
  <li>Why the body element has the excess width?</li>
  <li>Is there an alternative to overflow-x that will not create mobile scrolling issues?</li>
  <li>Any other areas to investigate to try and solve this issue?</li>
  </ol>
  
  <p>Thanks so much for any insight here!</p>