flexbox

👾Hello Juan, congratulations for your new solution!

I did some fixes to your code and also a tip about how to make the header image responsive: To make it centerd I removed all width and height from body there you need on flex and min-height: 100vh to make this alignment:

body {
    background-color: var(--pale-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* height: 900px; */
    /* max-width: 1440px; */
    /* min-width: 300px; */
}

And a good practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

✌️ I hope this helps you and happy coding!

HI @JuanGarridoTroche,

Your card is wider than the one in the design and because you used background-size: cover the image is zoom in to cover the size of it's wrapping container while still keeping it's aspect ratio. If you for example set the max width of the card to 400px pixel you'll see that the image will look closer to the one in the design.

But you did good these are things you'll learn and pickup as you practice.

Thanks for your comments. I'll try not to make that mistake again. I'm still learning thanks to your comments. Thank you very much for your answer!