Eu nao estou conseguindo colocar as imagens "centralizado" junto aos itens do
.produtos li {
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
box-sizing: border-box;
padding: 20px 30px;
border-color: black;
border-width: 2px;
border-style: solid;
}
hoje, com a Alura e o Google Gemini
Como resolvi? Fiquei testando o tamanho apenas da imagem e nao do
.produtos img {
width: 100%;
}
Só não sei se esta 100% correto essa gambiarra, mas funcionou aqui.
acho q se funcionou é oq importa kkkkkkkk
abaixo como está o meu css dos produtos.
.produtos{
width: 940px;
margin: 0 auto;
padding-top: 70px;
padding-bottom: 70px;
}
.produtos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid #000000;
border-radius: 10px 20px 30px 40px;
}