The concept of the box model is unintuitive. You can’t simply specify a 100% width on a block level element with a margin or padding and have it stay within the confines of the parent bounding box. Luckily, there’s a fix using the
box-sizing tag which is compatible in all major browsers and IE8+.
The above snippet will allow you to start defining your box level elements with precise widths (or 100% width, for that matter) and have any margin and padding subtracted from the specified dimension. This is a huge benefit and takes the pain out of exact width calculations when dealing with positioning.
If you’d like to see these two examples combined, simply navigate over to this example I have created for you.
I’ll skip the details in lieu of a much more thorough explanation from Chris Coyier. Give the following a read if you’re interest in knowing the specifics as to what’s going on: