无序列表不会居中对齐

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