為什么我要建立的網站右側有空白？

Question

我正在建立一個使用網格系統作為框架的網站。 剛開始時，頁邊距和填充沒有問題，但是現在網站右側有多余的空白。

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

我已經發現問題了，它來自以下代碼：

.grid_12 { width: 100%; }

當我注釋掉這行代碼時，問題就消失了，但是我在整個站點的許多地方都使用了它，並且想知道為什么這突然發生了。 我想保持原樣，以某種方式修復它。

Answer 1

因為body的邊距為8px，所以可以通過在body css標簽中添加margin 0來更改它

演示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%;
}