Неупорядоченный список не будет выравниваться по центру

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 элемента. Изменить CSS вашего ul на это, и он будет работать:

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