为什么我正在建立的网站右侧有空白区域？

Question

我使用网格系统作为框架构建网站。起初我没有边距和填充的问题，但现在我的网站右侧有额外的空白区域。

这是我的小提琴：http://jsfiddle.net/071ad2hg/1/

我已经发现了问题，它来自以下代码：

.grid_12 { width: 100%; }

当我评论这一行时，问题就消失了，但我已经在我的网站的许多地方使用过它，并且想知道为什么会突然发生这种情况。我想保持原样并以某种方式解决它。

Answer 1

Beacuse正文有8px的余量，您可以通过向body css标签添加margin 0来改变它

demo http://jsfiddle.net/ckqkyaqd/

body {
    font-family: 'elegant_luxmager';
    color: #444948;
    margin:0;

}

Answer 2

在css中将它添加到您的身体。

margin: 0;

并为网格设置像素宽度。

.grid_12 {
width: 1000px;
margin: 0 2% 1% 0;
float: left;
display: block;
}

我建议改用.wrapper。

.wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}

<div class="wrapper"></div>

---

找到您的问题：

添加空白的25％边距，使用包装器将该部分居中或使用<center>

#images_row_1, #images_row_2, #images_iOS {
 margin-left: 25%; 
}

Answer 3

使用Google Chrome开发人员工具中的检查器，查看CSS的应用顺序。您有这个额外的保证金，正在应用于div。尝试使用包装器div或更好地使用定义的响应式框架，如Bootstrap或Foundation。

#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}