The alignment of these buttons within their container is not what I desire. They are currently floating to the left, which is a result of the float: left; attribute applied to them.
I tried removing the float: left; and instead used text-align: center; on the container, but it didn't quite achieve the centered look I wanted. Can anyone help me figure out why? Thanks! :)
The CSS for the container:
#navbar {
background: #303030;
width: 100%;
box-sizing: border-box;
text-align: center;
}
CSS for each button:
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;
}
HTML snippet:
<div id ="navbar">
<a href="https://www.answers.legal" class="button"><i class="fa fa-home"></i> HOME</a>
<a href="https://www.answers.legal/questions" class="button"><i class="fa fa-question"></i> Q&A</a>
<a href="https://www.answers.legal/forums" class="button"><i class="fa fa-comment"></i> FORUMS</a>
<a href="https://www.answers.legal/contact" class="button"><i class="fa fa-phone"></i> CONTACT</a>
<a href="https://www.answers.legal/support" class="button"><i class="fa fa-life-ring"></i> SUPPORT</a>
<a href="https://www.answers.legal/about" class="button"><i class="fa fa-info-circle"></i> ABOUT</a>
</div>