I'm in the process of building a website with a mobile-first approach. Right now, I'm focusing on styling the navigation bar, which consists of a ul containing five li elements and an a element within each li. In the mobile layout, my goal is to have the navigation perfectly centered. While the nav element and the li elements seem to be centered, the a elements are not – they appear skewed to the right. How can I fix this issue?
Below is the HTML code:
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="programs.html">Programs</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="why.html">Why</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
And here is the CSS code:
nav {
width: 15%;
margin: 0 auto;
padding-top: 0.5em;
}
nav ul {
list-style-type: none;
}
nav li {
max-width: 100%;
margin: 1em;
text-align: center;
border-radius: 10px;
}
nav a {
display: inline-block;
width: 100%;
margin: 0 auto;
padding: 0.5em;
color: inherit;
text-decoration: none;
}
Here's an image showing how the nav looks in the Chrome browser: