title: Navigation displaying slightly different in Firefox
body: <p>On a site I'm working on, I've got everything looking pretty much the same over the <strong>main</strong> browsers (checking Chrome, Safari &amp; Firefox).</p>
  
  <p>All except for a pesky 1px gap on the navigation items, noticeable on the <strong>active</strong> items (when the background is filled).</p>
  
  <p>You can visit the site here: <a href="http://lumbre.breadadams.com/" rel="nofollow noreferrer">http://lumbre.breadadams.com/</a></p>
  
  <p>This is the gap I'm talking about</p>
  
  <p><img src="https://i.stack.imgur.com/2TGzC.png" alt="1px menu item space"></p>
  
  <p>I've messed about with <code>height</code>, <code>line-height</code>, <code>padding</code>, etc. of multiple elements (nav, ul and such), but nothing seems to do the trick.</p>
  
  <p>However if I increase <code>font-size</code> from <code>1.2em</code> to <code>1.3em</code> it fits, but then it doesn't on Chrome. Increasing the font <code>0.1</code> at a time makes it alternate between fitting on Chrome and Firefox basically.</p>