Something strange is happening in Firefox, it seems like the debug console is not telling the truth or there's something I'm not seeing.
Here's the CSS for the body tag:
html, body {
width: 100%;
}
body {
padding: 5% 10% 0 10%;
font-size: 1.2em;
font-family: 'Raleway', Arial, sans-serif;
font-weight: 300;
color: #2b2b2b;
margin: auto;
max-width: 1200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
I've used the "box-sizing" property so that the max-width should be 1200px with the padding included. However, according to the debug console (at the bottom right), the width of the content area should be 898px but when I measure it, I get a different result.
Could I have misunderstood the box-sizing:border-box property?
Thank you for your help!
EDIT : I have created a jsfiddle here with a simplified example.
Take a look at the image below where you'll see the html, the box model from the inspector, the render, and a red square I added in Photoshop (which is really 150x150px). It's puzzling because the inspector claims the box is 150x150 but clearly that's not accurate.