为什么我的<a>元素</a>不在我的<a>中心</a> <li> <a>导航元素？</a>

Question

I am creating a website using a mobile-first approach. I am currently styling the navigation bar, which is comprised of a ul with five li elements and an a element within each li . For the mobile layout, I want the navigation to be perfectly centered. The nav element and the li elements appear to be perfectly centered; however, the a elements are not centered within each li ... They are skewed toward the right. How can I correct this?

Here is my HTML:

<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 my CSS:

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;
}

And here is an image of what the nav currently looks like in the browser (Chrome):

Answer 1

设置li的margin和padding为0； padding为0。

Answer 2

Add the following inline or in an external style sheet to nav a

margin: 0px;
text-align: center;

Answer 3

Try this :

nav ul {
    display: block;
    overflow: hidden;
    padding: 0px;
    list-style-type: none;
  }

nav a {
     display: block;
     width: 100%;
     margin: 0 auto;
     color: inherit;
     text-decoration: none;
     overflow: hidden;
     }

And use max-width on the tag not simple width