Style in disordered list

CSS

* {
    margin:0 auto;
}

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

.menuPrincpal {
}

.menuPrincipal li {
  display:inline;
}

.menuPrincipal li a {
  display:inline-block;
  vertical-align:middle;
  width:19.6%;
  height:50px;
  line-height:50px;
  text-align:center;
  font-size: 24px;
  color: rgb(223,189,92);
}

.menuPrincipal li a:hover {
  color: #FFF;
  background-color:rgb(223,189,92);
}

HTML

<ul class="menuPrincipal">
  <li>
    <a href="index.php">
      <img src="_img/_menuImgs/home.png"> Home      
    </a>
  </li>
  <li>
    <a href="catalogo.php">
      <img src="_img/_menuImgs/colecao.jpg"> Coleção      
    </a>
  </li>
  <li>
    <a href="contato.php">
      <img src="_img/_menuImgs/contato.png">Contato      
    </a>
  </li>
  <li>
    <a href="loja.php">
      <img src="_img/_menuImgs/loja.png"> Loja       
    </a>
  </li>
  <li>
    <a href="sobre.php">
      <img src="_img/_menuImgs/sobre.png"> Sobre      
    </a>
  </li>
</ul>

The idea is to remove the spaces margim and padding from UL . And IS working when I do:

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

.menuPrincpal {
}

But when I do:

ul {
    list-style:none;
}

.menuPrincpal {
    margin:0;
    padding:0;
}

Why?