정렬되지 않은 목록 정렬되지 않음 센터 정렬

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