NFT preview card component using CSS

Hola gaby!

Felicitaciones por acabar tu segundo reto, has implementado varias cosas bien del proyecto lo cual me agrada, desde las transiciones, maquetado, los colores y ningún error en el reporte.

Algo que puedo agregar es que no recomiendo que hagas que tu card tenga un porcentaje en este caso porque se va achicando mientras achicas la pantalla y por lo menos en este reto no es muy necesario porque pierde estetica.

En mi caso te voy a dar algunos detalles para que implementes y me dices que tal te queda.

A la clase card. quitale todo el margen y cambia el max-width por max-width: 340px. Le quitamos el margen porque luego lo centraremos con flex como en el comentario que te hice en el primer proyecto y le ponemos este max-width para que sea constante el tamaño y no crezca.

Ahora al main le daremos las siguiente propiedades para centrarlo:

main {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

}

Masomenos ya sabes como funciona le damos una mínima altura del tamaño de toda la pantalla y lo centramos en ambos ejes gracias a flex.

Por cierto al body le quite el max-width para que cuando se agrande a más de 1440px igual pueda estar centrado. Entiendo que capaz lo pusiste porque te recomiendan que para 1440px tenga tal diseño pero esa medidas que da frontend mentor significan que se vea bien como en el diseño en esa medida no que luego ya no tengan estilo, lo mismo para cuando te dan diseño mobile y te dicen 375px, osea debe mostrarse bien y así como en el diseño pero no significa que apenas sobrepase esa medida pasa al diseño en desktop, masomenos tu elegis en que momento siente que ya el diseño de mobile no debe ser y pasar al de tablet o al de escritorio. Osea estos detalles cada vez te darás cuenta con la experiencia así que tranqui de poco a poco serás mucho mejor.

De nuevo felicitarte por no tener errores en el reporte y que te halla quedado bastante bien.

Sigue así, éxitos.

Nice work Gabriela, the easiest way to center the card is to use display flex, align-items: center, justify-content: center on the main tag. You can also try with margin: calc(50% - half of the card height) auto. Calc can work with any positioning too e.g. absolute, relative... Hope this was helpfull. Keep up the good work!