无序列表不会居中对齐

Question

h1 似乎没有问题居中，但是，列表（菜单栏）不会对齐，它似乎有点缩进。请解释一下。

我的 HTML：

<h1>Welcome!</h1>

    <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Contact</li>
    </ul>

我的 CSS：

h1{
text-align: center;
}

ul{
  position:relative;
  display: inline-block;  
  list-style: none;
  width:100%;
  text-align: center;
  margin: auto;
}

li{
  list-style: none;
  text-align: center;
  margin: 15px; 
  display: inline-block; 
}

Answer 1

ul 元素上仍有默认填充。 将 ul 的 CSS 更改为此，它会起作用：

ul{
  position:relative;
  display: inline-block;  
  list-style: none;
  width:100%;
  text-align: center;
  margin: auto;
  padding: 0;
}