An element set to display: inline-block takes part in inline layout, which means the whitespace between two of them in the source is a text node and gets rendered as a space. That is roughly four pixels of gap nobody asked for, and it does not appear in the box model, so no amount of staring at the inspector explains it.
<!-- the newline between these tags is a rendered space -->
<li>Orders</li>
<li>Invoices</li>
<!-- one way out: end the tag on the following line -->
<li>Orders</li
><li>Invoices</li>The instinct is to fix it in CSS with a negative margin, and that works until the font changes, because the gap is one space in whatever font the parent uses. Setting font-size: 0 on the container and restoring it on the children is more reliable but breaks any child sized in em. Floating them removes the problem entirely at the cost of needing a clearfix, and it is worth deciding which of those three you are prepared to live with before the layout has forty of these in it.