Solución:
Revisa todos los acolchados. Si agrega relleno a algo con un ancho establecido al 100%, saldrá del elemento principal.
Se muestra aquí http://jsfiddle.net/wzZ3W/
Código
<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;
}
También verifique los márgenes negativos izquierdo y derecho en los elementos que abarcan la página. Por ejemplo, http://jsfiddle.net/s7zrukj2/2/
Además, use un restablecimiento de CSS.
Si no quieres usar overflow: hidden probablemente también debería colocarlo en el elemento del cuerpo. Al igual que
body, html { overflow-x:hidden; }
Aunque el hecho de que algo se desborde indica un error en su diseño receptivo y debe intentar solucionarlo en su lugar para evitar que algo no sea visible para un usuario móvil.
Puede poner esto en su consola para delinear todos los bloques / div. Luego puede encontrar el que está fuera de su contenedor.
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
Si no funciona para dispositivos móviles, debe usar la siguiente metaetiqueta:
<meta name="viewport" content="width=device-width, initial-scale = 1.0,
maximum-scale=1.0, user-scalable=no" />
esto establecerá el ancho al ancho del dispositivo.