html - Div alignment issues - html

Question

So I am currently making a website for a friend of mine and I have set the left and right margin to 80px. This works for everything but my main body. It seems that it expands past the right margin, and simply has a margin of 60px instead of 80px.
Here is a screenshot: http://i.imgur.com/XtRdlUv.png
EDIT: I cut off some of the left margin, sorry for the confusion
As seen with the red arrow, there seems to be an offset when their shouldn't.
Here is my code:
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

You don't need
width: 100%;
Since .mainbody is a block element, it will expand to fill all the remaining space.
Otherwise, adding it produces the problem because of the content-box sizing model.
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>

Answer 2

It is likely because your .mainbody element is using the default content-box, which adds an extra left and right padding of 20px each on top of the 100% width. Therefore, the final computed width of the element would be 100% + 40px, which causes it to 'overflow' of sorts.
To fix this, simply declare box-sizing: border-box, i.e.:
.mainbody {
box-sizing: border-box;
width: 100%;
outline: #293135 solid;
background-color: #444444;
margin-top: 40px;
text-align: left;
padding: 20px;
color: #FFFFFF;
}
In fact, it is recommended that you use this rule: * { box-sizing: border-box;} as recommended here.

Answer 3

I think you're using old ways. Try this! .mainbody { width: calc(100% - 120px); }
This is your new css and JSFiddle link! http://jsfiddle.net/Leo4v9rc/
body {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
}
.wrapper {
padding-top: 10px;
text-align: left;
margin: 0px auto;
}
.mainbody {
width: calc(100% - 120px);
outline: #293135 solid;
background-color: #444444;
margin:40px auto 0 auto;
text-align: left;
padding: 20px;
color: #FFFFFF;
}