@RailsonOL
Posted
Vou te dar algumas dicas, nem tudo precisa ser encapsulado, por exemplo, o fato de estar dentro de um <p> ou de um <h1>, <h2>, h3 já vai servir pra posicionar aquele elemento bem.
Assim como tu falou, tem um encapsulamento enorme, vou na parte direita desse exemplo, na parte do Summary:
<div class="box-summary">
<div class="div-summary">
<h2 class="title-summary">Summary</h2>
</div>
[... RESTO DO CODIGO]
</div>
nesse caso acima, tu poderia simplemente tirar esse primeiro div e deixar o h2, o box-summary nem precisa ser flex ou grid. Aí poderia ter uma div pro resto do conteudo e ela sim seria flex ou grid:
<div class="box-summary">
<h2 class="box-summary-title">Summary</h2>
<div class="box-summary-flex">
[... RESTO DO CODIGO]
</div>
</div>
outra dica, tente não usar nomes em português ou misturar línguas (<div class="caixa-right red">), mesmo q tu seja brasileiro, o inglês é a língua universal, e se tu não souber inglês, pode traduzir e vai tudo ficar show, cê pode continuar pedindo ajuda aqui em português, tenho certeza que alguém te ajudará.
🥰 Boa sorte com sua jornada, também estou aprendendo.
