Reply To: cross browser padding? Firefox issue

[giudev]

your grid is not very reliable in that way.
Also is not centred in the flex container for the percentage margin (left) you are using.

As Beverleyh suggested try to use better the flexbox properties and let it manage the space-between items

As quick fix you could change that margin-bottom: 3% percentage and using pixels instead (30px), but your code is a mix of unused properties that you should clean a bit.

If you prefer to use floating boxes then don’t use flexbox but you could create a grid bootstrap-style

ul { margin: 0 -15px; }
li { float: left; width: 25%; padding:  0 15px; }
<ul>
    <li>
        <div>single box here</div>
    </li>
</ul>