Unexpected border found on the random left side of a column in Chrome
<p>I create a row with 24 columns inside. I didn't put gutter and border between the cell so each column is stacked with one another. However, in Chrome browser, I found a weird thing. There are borders on the random left side of a column.
Chrome : 
<a href="https://i.stack.imgur.com/JRvas.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JRvas.png" alt="enter image description here"></a></p>

<p>Firefox : 
<a href="https://i.stack.imgur.com/KyIyr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KyIyr.png" alt="enter image description here"></a></p>

<p>Could anyone explain to me what condition is this ? Thanks</p>

<p>Additional Information :</p>

<ul>
<li><p>A column has <code>display:inline-block</code>, <code>margin-right:-4px</code>, <code>position:relative</code>, and <code>vertical-align:top</code></p></li>
<li><p>A row has 100% width </p></li>
</ul>