Product preview card component (html + css)

👾Oi Luciano, beleza? Parabéns pela sua nova solução.

Como o Felipe falou no comentário anterior realmente ficou faltando o alinhamento, vou te dar algumas dicas em relação ao seu código.

Sempre que você for fazer um desafio tipo esse, tenta pensar em quais são os elementos extremamente necessários afim de evitar colocar aquela div a mais e deixar seu html muito longo, por exemplo, nesse desafio tudo que você precisa são uma <main> pra segurar as duas colunas e uma <section> pra cada coluna, na coluna de text pode deixar tudo solto exceto a parte do botão que precisa de uma div.

Ao invés de puxar as imagens pelo css você pode usar picture pra segurar as imagens desktop e mobile dentro de um mesmo elemento e ainda definir quando elas devem ser trocadas de acordo com o tamanho de tela e dispositivo.

Caso você não conheça ainda a tag picture, aqui um guia de como usá-la:

https://www.w3schools.com/tags/tag_picture.asp

Espero ter ajudado e continue no foco!

Como vai, Luciano! Seu layout ficou muito bom.

Em relação ao seu código, você pode usar o flex no body pra centralizar todo o conteúdo na tela. Precisa definir o tamanho do elemento pai (nesse caso o body) porque o flex vai centralizar de acordo com esse valor.

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Nesse exemplo 100vw e 100vh vai ocupar todo o espaço da tela, "vw" e "vh" siginifiam "view width" e "view height" respectivamente.

Outra dica é usar a tag <main> invés de <section>. Isso optimiza seu site para recursos de acessibilidade.

Por último, evite usar <br> para espaçar os elementos. Você pode substituir isso por margin ou padding no CSS.