html - Div 对齐问题

Question

所以我目前正在为我的 friend 制作一个网站，并将左右边距设置为 80px。这适用于除我的主体以外的所有内容。看起来它超出了右边距，并且只有 60px 的边距而不是 80px。

这是一个截图:http://i.imgur.com/XtRdlUv.png

编辑:我切掉了一些左边距，很抱歉造成混淆

如红色箭头所示，在不应该出现的情况下似乎存在偏移。

这是我的代码:

body {
  background: url(image) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  margin-left: 80px;
  margin-right: 100px;
}
.wrapper {
  padding-top: 10px;
  text-align: left;
  margin: 0px auto;
}
.mainbody {
  width: 100%;
  outline: #293135 solid;
  background-color: #444444;
  margin-top: 40px;
  text-align: left;
  padding: 20px;
  color: #FFFFFF;
}

<div class="mainbody" style="text-align: center">
  <font face="Arial, Helvetica, sans" size="4">
    <h1 style="text-decoration: underline">Download</h1>
    <p>Features Include:</p>
  </font>
</div>

Answer 1

你不需要

width: 100%;

因为 .mainbody 是 block 元素，它会扩展以填充所有剩余空间。

否则，由于内容框大小模型，添加它会产生问题。

body {
  background: url(image) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  margin-left: 80px;
  margin-right: 100px;
}
.wrapper {
  padding-top: 10px;
  text-align: left;
  margin: 0px auto;
}
.mainbody {
  outline: #293135 solid;
  background-color: #444444;
  margin-top: 40px;
  text-align: left;
  padding: 20px;
  color: #FFFFFF;
  text-align: center;
  font-family: Arial, Helvetica, sans;
  font-size: 18px;  
}

<div class="mainbody" style="">
  <h1 style="text-decoration: underline">Download</h1>
  <p>Features Include:</p>
</div>