title: Why do these two elements not align next to each other when width is set to 50%?
body: <p><a href="http://codepen.io/anon/pen/LGdqyp" rel="nofollow">http://codepen.io/anon/pen/LGdqyp</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span&gt;First&lt;/span&gt;
  &lt;span&gt;Second&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    padding: 0;
    margin: 0;
  }
  
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  span {
    display: inline-block;
    width: 50%;
    margin: 0;
    border: 1px solid #000;
  }
  </code></pre>
  
  <p>I have applied box-sizing, margin set to zero. The two elements are supposed to align next to each other. Why don't they?</p>