当宽度设置为50％时，为什么这两个元素不会彼此对齐？

Question

http://codepen.io/anon/pen/LGdqyp

HTML：

<span>First</span>
<span>Second</span>

CSS：

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;
}

我已经应用了box-sizing，边距设置为零。这两个元素应该彼此相邻。他们为什么不这样做？