Как удалить отступы элементов списка

Question

У меня есть padding-left, равное нулю, а margin-left установлено на ноль, и все же мои элементы списка все еще имеют отступ, тогда как я хочу, чтобы они совпадали с элементом h2. Мой код и скриншот проблемы:

Мой login.jsp:

<!-- Welcome page options --> 
    <div class="homepageNavButtons"> 
     <h2 id="loginLabel" class="homepageOptionsText">Welcome to the SGA web application. Choose 
      an option:</h2> 
     <ul class="homepageNavButtonsList"> 
      <li><a class="loginOptions" 
       href="${pageContext.request.contextPath}/menu" tabindex="1"> 
        Click here to login</a></li> 
      <li><a class="registerOptions" 
       href="${pageContext.request.contextPath}/register" tabindex="2">Click 
        here to register </a></li> 
     </ul> 
    </div> 

Мой CSS:

.homepageNavButtons { 
    width: 70%; 
    background-color: gray; 
    position: relative; 
    top: 70px; 
    margin: auto; 
} 

.homepageNavButtonsList ul { 
    margin-left: 0; 
    padding-left: none; 
    list-style: none; 
} 

.homepageNavButtonsList li { 
    list-style-type: none; 
    display: inline-block; 
    margin-right: 20px; 
    margin-left: 0; 
    padding-left: none; 
    list-style: none; 
    padding: 0; 
} 

.loginOptions { 
    color: blue; 
    text-decoration: none; 
    font-family: sans-serif; 
    font-size: 16px; 
} 

.registerOptions { 
    color: blue; 
    text-decoration: none; 
    font-family: sans-serif; 
    font-size: 16px; 
} 

Answer 1

Вы не выбирая ul, чтобы удалить все свои стили. Попробуйте это:

ul.homepageNavButtonsList { 
    margin-left: 0; 
    padding-left: 0; 
    list-style: none; 
} 

Вы были .homepageNavButtonsList ul с padding-left: none и вы, конечно, не были ul внутри .homepageNavButtonsList