Recomendação de melhoria no código

Notei que ao centralizar os <li> no código, não fica completamente centralizado dentro da class produtos porque existe um pequeno espaço entre as <li> deixando um pequeno espaço sobrando, então fiz uma pesquisa na internet para saber como resolver esse problema. Basta que na classe produtos da tag <ul> coloque uma font-size: 0; e depois alterar a margin do <li> para margin: 0 1.66% para preencher corretamente o espaço que sobra e deixando os itens da lista alinhados corretamente.

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
    font-size: 0;
}

.produtos li {
    display: inline-block;
    width: 30%;
    margin: 0 1.66%;
    vertical-align: top;
    text-align: center;
    box-sizing: border-box;
    padding: 30px 20px;
}