Olá, não estou conseguindo alinhar o texto destas imagens de forma que fiquem retas uma em relação a outra. E não estou conseguindo definir um background apenas para a parte dos itens da lista no HTML. Como posso arrumar isto? (obs: tive que reduzir o tamanho das imagens em outro comando, não sei se isto atrapalha :/)
o código HTML
<main>
<ul class="produtos">
<li>
<h2>Lingerie</h2>
<img src="produtos.jpeg">
<p class="produto-descricao"> Robe chiquerrimo </p>
<p class="produto-preco">R$ 65,00</p>
</li>
<li>
<h2>Calcinha</h2>
<img src="produtos.jpeg">
<p class="produo-descricao"> Calcinhas mega confortáveis e lindas</p>
<p class="produto-preco">R$ 25,00</p>
</li>
<li>
<h2>Sutiã</h2>
<img src="produtos.jpeg">
<p class="produto-descricao">Detalhes dessa coleção amarela porque é um caso de amor</p>
<p class="produto-preco">R$20,00</p>
</li>
</ul>
</main>E o código do CSS
.produtos{
width: 940px;
margin: 0 auto;
padding: 50px 0;
}
.produtos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
background-color: #ffbdc7
}
.produtos img{
max-width:250px;
max-height:250px;
width: auto;
height: auto;
}
.produtos h2{
font-size: 30px;
font-weight: bold;
}
.produto-descricao{
font-size: 18px;
}
.produto-preco{
font-size: 22px;
font-weight: bold;
margin-top: 10px;
}Como posso resolver?
