Responsive Element Padding

[ChadGregory]

I am creating my first responsive website.

 

My site has a wrapper that has the following css:

 

#wrapper {
width: 100%;
max-width: 1230px;
margin: 0 auto;
background: #e0dfdf;
}

 

and I would like to have this element have a padding of 15px but when i apply that style the width of the element increases by 15px when i want it to stay at for example the max-width of 1230px.

 

Any suggestions?

[Beeeeney]

Why don't you take 15px off the max-width?

[ChadGregory]

Why don't you take 15px off the max-width?

 

Thanks for pointing out the obvious lol I should have thought of that

[haku]

You may find discrepancies with IE (or another browser if you're testing in IE) if you just remove the value from the max-width. If so, then you can put a div inside the wrapper, and give it a 15px side margin.

[Scott_S]

to understand why that is happening read up on box model http://www.w3schools.com/css/css_boxmodel.asp and to control it with box-sizing http://www.w3schools.com/cssref/css3_pr_box-sizing.asp