css - 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;
}