Mozilla Firefox vs Chrome Padding Issue

I just ran into a problem where my menu bar was showing differently in Firefox and Chrome and I couldn’t figure out why.
Chrome looked like this:

While Firefox looked like this:

*Note that the slideshow below the menu is actually the same size in both. It’s the menu size that is different.

After doing some research, I found out that Firefox renders text differently than other browsers, so my font (Century Gothic) was actually slightly larger and skewed the alignment of the menu bar. However, the fix for this ended up being simple – just select the padding for Firefox only by using this CSS:

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

Of course, instead of “h1”, you would use whatever selector was affected. Hope this saves you some time!