CSS - 无法确定多余的水平滚动来自哪里？

Question

我一直在尝试修改使用媒体查询的响应式网站。

当网站缩放到移动尺寸时，无论您制作多大屏幕，都需要水平滚动。

我已经尝试过改变我认为可能导致这种情况的所有内容，但却无法深入了解它。

以下是网站和媒体查询css文件的链接

http://stopcry.in http://stopcry.in/styles/media-queries.css

Answer 1

您在宽度上添加填充：#sidebar和#container为100％，因此总宽度将始终高于100％;尝试使用百分比值进行填充，因此总宽度将为100％;像这样的东西：

#sidebar{width:90%; padding:25px 5% 10px}
#container{width:90%; padding:5%;}

Answer 2

在％宽度/高度之上添加填充。所以当你有100％宽度的填充时，它超过100％。

快速修复将box-sizing: border-box更改框模型，但您可能想要转到另一条路线。

http://caniuse.com/css3-boxsizing

编辑：似乎我迟到了...

Answer 3

将此添加到您的css

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

或

.Your_Container{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}