title: Pecentages and padding don't add up correctly
body: <p>I have two <code>labels</code> inside a <code>div</code> that's <code>width</code> is <code>75%</code>, and its <code>max-width</code> is <code>700px</code>. The <code>labels</code>, when set to <code>width: 49%</code>, <code>padding</code> (or <code>margin</code>) <code>:1%</code> and <code>display: inline-block</code>, don't display next to each other or stick out over the edge of the container. However, when the <code>width</code> is <code>49.5%</code>, they do until the containing <code>div</code> is less than its <code>max-width</code>. I have tried setting the <code>box-sizing</code> to <code>border-box</code>, but it only helped a little.</p>
  
  <p>I've also tried using a pixel <code>padding</code> instead of a percent, but that didn't work at all.</p>
  
  <p>Here is the relevant code:</p>
  
  <pre><code>#container {
    width: 75%;
    max-width: 700px;
    border: 1px solid #333;
    box-shadow: #d3d3d3 0px 0px 30px;
    border-radius: 4px;
    margin: auto;
    margin-top: 10%;
    background-color: white;
  }
  
  label {
    display: inline-block;
    width: 49%;
    font-weight: bold;
    font-size: 12px;
    padding: 1%;
  }
  
  input {
    display: block;
    border: 1px solid #333;
    border-radius: 2px;
    background-color: white;
    width: 100%;
    height: 24px;
    padding: 0px 3px 0px 6px;
    margin-top: 5px;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/gPEgr.jpg" alt="wrong"></p>
  
  <p><img src="https://i.stack.imgur.com/931rR.jpg" alt="Right"></p>