Center menu or by 10% left margin without compromising resposivity

Question

.nav-tabs {
    background-color: #ffff00;
}
.nav-tabs a {
    color: red;
}

<ul>
  <li role="presentation" class="active" ><a href="index.html">Home</a></li>
  <li role="presentation"><a href="produto.html">Produtos</a></li>
  <li role="presentation"><a href="sobre.html">Sobre</a></li>
  <li role="presentation"><a href="contato.html">Contato</a></li>
</ul>

Answer 1

The explanation and more examples are here , (in English)

To center an element use: margin: auto;

The section you showed would look like this:

.nav-tabs {
    background-color: #ffff00; 
    margin: auto;
}
.nav-tabs a {
    color: red; 
}