Pessoal, sabe o que está errado aqui no meu código? Ele fica assim, com a primeira caixa desalinhada.
Meu código está assim:
.produtos {
width: 940px;
margin: 0 auto;
}
.produtos li {
display: inline-block;
text-align: center;
width: 30%;
}
.produtos h2 {
font-size: 30px;
font-weight: bold;
}
por padrão o CSS alinha as caixas pelo fundo você precisa passar pro CSS que você quer alinhar pelo topo, adicionando vertical-align: top ficando assim
.produtos li {
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
}