Fala, Gisele, tudo bem ? Conseguir te ajudar :D
No html, eu coloquei uma class com o nome (exemplo) nas tags Li, isso vai facilitar muito mais para frente. Você pode colocar o nome que quiser, apenas usei para exemplificar.
Ficou assim no HTML:
<ul class="itens">
<li class="exemplo">
<h2>Bolos</h2>
<img src="img_bolos.jpg" alt="Bolos">
<p>O Pão-de-ló é um dos mais antigos bolos da história. Foi ele o primeiro a chegar ao Brasil. Era servido com muita pompa: era hábito só nas casas dos padres mais abastados e dos antigos magistrados e chegava à mesa em uma travessa dourada.</p>
</li>
<li class="exemplo">
<h2>Sobremesas</h2>
<img src="img_sobremesas.png" alt="Sobremesas">
<p>As primeiras sobremesas legitimamente brasileiras foram as frutas tropicais, tais como manga e carambola, regadas a mel.</p>
</li>
<li class="exemplo">
<h2>Doces</h2>
<img src="img_doces.png" alt="Doces">
<p> Os primeiros doces chegaram ao Brasil com Pedro Alvares Cabral, em 1500 e foram ofertados como presentes, aos índios de Porto Seguro. Logo as senhoras portuguesas trariam suas receitas cheias de segredos, que pouco a pouco foram ensinando as cunhãs indígenas.</p>
</li>
</ul>
Ao fazer isso, eu fui no css e coloquei um height igual para todos de 470px, apenas para mostrar que definindo esse tamanho, eles ficam na mesma altura. Mas você coloca a altura que ficar melhor no seu código.
Coloquei dessa forma no CSS:
.exemplo {
height: 470px;
border: 2px dashed #e68405;
border-radius: 10px;
}
E retirei da class (.itens li), essas propriedades:
border-color: #e68405 ;
border-width: 2px;
border-style: dashed;
border-radius: 10px;
height: auto;
Outra coisa que eu fiz, por fora, para o seu código ficar mais limpo, foi diminuir a quantidade de comandos (border). Ao fazer um border, para não ter que definir: border-style; border-color... você pode definir tudo isso em um comando.
Por exemplo: border: width style color;
width: Irá definir o tamanho da borda;
style: Irá determinar o estilo da borda;
color: Irá indicar a cor que será utilizada na borda.
Código na prática:border: 2px dashed white;
Espero ter te ajudar !!! Bons estudos :D
