title: CSS padding issue using box-sizing:border-box in Firefox
body: <p>I'm having a weird issue in Firefox, it looks likes the debug console is lying to me or I'm missing something. </p>
  
  <p>Here is the CSS for the body tag : </p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I'm using the property "box-sizing" so the max-width is supposed to be 1200px with the padding inside. As the debug console is saying (at the bottom right), the width of the content area is supposed to be 898px but if I measure it, here is what I really get : </p>
  
  <p><img src="https://i.stack.imgur.com/qkrtN.jpg" alt="CSS padding issue using box-sizing:border-box in Firefox"></p>
  
  <p>Am I mistaken about the box-sizing:border-box property ?</p>
  
  <p>Thank you guys !</p>
  
  <p><strong>EDIT :</strong> I made a jsfiddle <a href="http://jsfiddle.net/VJA52/1/" rel="nofollow noreferrer">here</a> with a simplified case. </p>
  
  <p>Look at the image below, you'll find the html, the box model given by the inspector, the render and a red square I added on Photoshop (which is really 150x150px). I don't understand, the inspector is saying that the box is 150x150 but it's wrong... </p>
  
  <p><img src="https://i.stack.imgur.com/wpZZ8.jpg" alt="box-sizing and inspector issue on Firefox"></p>