0

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>

Improve this question
4
  • 3
    You're making a website in 2014 and you're using FONT tags? So very retro! I like! Commented Oct 29, 2014 at 22:23
  • The problem is probably width: 100% + padding: 20px, which makes a width of 100% + 40px. Look into box-sizing: border-box. And use the devtools to hilite elements' sizes. jsfiddle.net/rudiedirkx/pbqn33og Commented Oct 29, 2014 at 22:25
  • Is there a reason that the <body> tag is set to a size smaller than the screen size? Commented Oct 29, 2014 at 22:26
  • It is to give that extra touch (Mainly just to show off the background) Commented Oct 29, 2014 at 22:27

3 Answers 3

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

Comments

0

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; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.