为什么不是我的<a> elements centered within my <li> navigation elements?</li></a>

Question

我正在使用移动优先方法创建网站。我目前正在为导航栏设置样式，该导航栏由ul组成，其中包含五个li元素，每个a中都有一个li元素。对于移动布局，我希望导航完美居中。 nav元素和li元素似乎完全居中;但是，a元素并不在每个li中居中......它们向右倾斜。我怎么能纠正这个？

这是我的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>

这是我的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;
}

以下是nav目前在浏览器中显示的内容（Chrome）：

Answer 1

将li的margin和padding设置为0;

Answer 2

将以下内联或外部样式表添加到nav a

margin: 0px;
text-align: center;

Answer 3

试试这个：

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

并在标签上使用max-width而不是简单的宽度