html-Div对齐问题

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 , ie:

.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;
}