How to avoid horizontal scroll on mobile web with responsive web design?

Check all the paddings. If you add padding to something with width set to 100% it will go outside the parent.

Shown here http://jsfiddle.net/wzZ3W/

Code

<div id="fillX">
    <div id="childXFill">
    </div>
</div>

#fillX
{
    background:red;
    width:100%;
    opacity:0.5;
}

#childXFill
{
    background:blue;
    width:100%;
    padding:10px;
    opacity:0.5;
}

Also check negative left and right margins on elements that span the page. E.g. http://jsfiddle.net/s7zrukj2/2/

Also, use a CSS Reset.

---

If you wan't to use overflow: hidden you should probably set it on the body element too. Like so

body, html { overflow-x:hidden; }

Although the fact that something is overflowing indicates an error in your responsive design and you should try and fix it instead to prevent something not being visible to a mobile user.

If is not working for mobile you should use the following meta tag:

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

this will set the width to device width.

You can put this in your console to outline all block/div. Then you can find the one which is outside of your container.

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})