Mobile browsers: overflow-x creating white space off right side of viewport

Question

Whenever I code a responsive website that can scale all the way down to the size of a watch, there is an overflow of white space off to the right of the viewport that enables the horizontal scroll bar. The fix is easy: wrap the body in a div, set its width to auto and overflow to hidden. My question is this: is this a common practice/method that a lot of you use or a common problem that a lot of you encounter? Is there a "cleaner" way around this?

And I am using this meta viewport tag:

<meta name="viewport" content="initial-scale=1.0, user-scalable=yes, width=device-width">

Answer 1

One cleaner way that will work for some situations (but not necessarily all) is to apply overflow:hidden on the BODY container.

The reason it might not work is that in some cases the container that's failing to trap overflow may be deeper in the DOM.