Slightly off-centered buttons - html

Question

I need these buttons to be horizontally centered within their container..as you can see, they are floating to the left. That is because I have a float: left; attribute on them.
However, when I remove the float: left; attribute and apply text-align: center; to the container, this is what happens...
Almost centered, but not quite. What's the deal? Thanks! :)
The container's CSS:
#navbar {
background: #303030;
width: 100%;
box-sizing: border-box;
text-align: center;
}
Each button's CSS:
a.button {
width: 16.3%;
background: #4d4d4d;
height: 50px;
display: inline-block;
text-decoration: none;
color: #fff;
text-align: center;
max-width: 250px;
padding-top: 12px;
box-sizing: border-box;
font-size: 145%;
transition-property: background, z-index, font-size, color;
transition-duration: 0.35s;
}
The relevant HTML
<div id ="navbar">
<i class="fa fa-home"></i> HOME
<i class="fa fa-question"></i> Q&A
<i class="fa fa-comment"></i> FORUMS
<i class="fa fa-phone"></i> CONTACT
<i class="fa fa-life-ring"></i> SUPPORT
<i class="fa fa-info-circle"></i> ABOUT
</div>
</div>

Answer 1

The misalignment is probably due to a space character between each link. This is a common problem when using display: inline-block;. You can remove with a couple of methods.
Method 1:
Set a negative letter-spacing. This depends on font-family and font-size, so try a couple of different values.
#navbar {
letter-spacing: -4px;
}
a.button {
letter-spacing: normal;
}
Method 2:
Remove any space/linebreaks between the links. This will of course make the code pretty unreadable.
<i class="fa fa-home"></i> HOME<i class="fa fa-question"></i> Q&A<i class="fa fa-comment"></i> FORUMS<i class="fa fa-phone"></i> CONTACT<i class="fa fa-life-ring"></i> SUPPORT<i class="fa fa-info-circle"></i> ABOUT
Method 3:
Ommit the closing </a> for all links but the last. This is still valid HTML. An <a> element will automatically close when it's followed by another <a>.
<a href="https://www.answers.legal" class="button"><i class="fa fa-home"></i> HOME
<a href="https://www.answers.legal/questions" class="button"><i class="fa fa-question"></i> Q&A
<a href="https://www.answers.legal/forums" class="button"><i class="fa fa-comment"></i> FORUMS
<a href="https://www.answers.legal/contact" class="button"><i class="fa fa-phone"></i> CONTACT
<a href="https://www.answers.legal/support" class="button"><i class="fa fa-life-ring"></i> SUPPORT
<i class="fa fa-info-circle"></i> ABOUT