html - div 的宽度问题

Question

我不明白为什么这两个div 的宽度不同。我的目标是在页面的每一侧都有边距。此外，我不明白为什么左侧的空间应该相等，但右侧的空间却更多。

http://jsfiddle.net/dazakip/u7d59901/2/

body {
  margin-left: 9%;
  margin-right: 9%;

}

.nav {
  float: left;
  width: 100%;
  height: 10px;
  padding-top: 3px;
  padding-bottom: 10px;
  background-color: green;
}

.logo {
  clear: both;
  width: 100%;
  height: 100px;
  background-color: #C7D0D5;
  padding: 20px;
}

Answer 1

当您添加内边距时，它会将其添加到尺寸中，因此您的 .logo 宽度为 100% + 40px。要解决此问题，请将框大小设置为边框框。

.logo {
  clear: both;
  width: 100%;
  height: 100px;
  background-color: #C7D0D5;
  padding: 20px;
  box-sizing: border-box;
}