I'm new to building websites with HTML5, and I've encountered a frustrating issue. I'm attempting to center the items in a horizontal navigation bar at the top of my page, but it's not aligning as expected. The items are contained within an unordered list.
After applying display:inline-block to the list items and text-align:center to the parent element, the alignment seems close but ends up slightly off-center to the right. When I removed the list structure and placed the items in a div instead, they centered perfectly. However, managing the formatting of each individual element without the list proved challenging. Once I returned them to a list format, the misalignment reappeared. To visualize the issue better, I added a white background to the header.
#menu {
width: 960px;
max-height: 90px;
background: #ffffff;
}
#menu ul {
text-align: center;
list-style: none;
padding-top: 18px;
width: 960px;
}
#menu li {
display: inline-block;
vertical-align: middle;
}
#menu li a,
menu li a:visited {
color: #333347;
text-decoration: none;
font-size: 20px;
font-weight: bold;
padding: 0px 13px 0px 13px;
}<nav id="menu">
<ul>
<li class="menuitem"><a href="index.html">Home</a></li>
<li class="menuitem"><a href="gallery.html">Gallery</a></li>
<li class="menuitem"><a href="shop.html">Shop</a></li>
<li class="menuitem"><a href="contact.html">Contact</a></li>
</ul>
</nav>The list should have been centered, but ended up slightly to the right of center.