Border-box with 50% width can't fit into one line
I set li elements for width: 50%, in order to separate the ul block into two li in one line like the picture below. And here's the JS bin for example, with normalize.css.
[Picture 1]
However, the width of li needed to be less than 50%, like 49.6% or less. If not, some space showed up between li and li for unknown reason, even though I'd set the box-sizing: border-box and margin: 0 for li.
[Picture 2]
I know I can use float: left to make it work like the first picture, but I want to know why there's space existed in picture 2.
P.S.: I'm using Chrome for my browser, if on Safari, it's okay for 49.5%.
It's hard to know without seeing the code, but I think the issue is that li elements on different lines will display with spaces between them. Whitespace doesn't USUALLY make a difference with HTML but in the case of whitespace between li elements it does. So the following will display spaces
<ul>
<li style="display: inline;">1</li>
<li style="display: inline;">2</li>
<li style="display: inline;">3</li>
</ul>
But this one won't.
<ul>
<li style="display: inline;">1</li><li style="display: inline;">2</li><li style="display: inline;">3</li>
</ul>
Here's a codepen for demonstration. If you can't modify the original html, try adding a negative margin.