Product

Thank you very much, noted.

👋 𝗛𝗲𝗹𝗹𝗼 𝗢𝗡𝗬𝗜𝗡𝗬𝗘𝗖𝗛𝗨𝗞𝗪𝗨 𝗝𝗘𝗦𝗦𝗜𝗖𝗔 𝗠𝗔𝗟𝗜𝗭𝗨, 𝗰𝗼𝗻𝗴𝗿𝗮𝘁𝘂𝗹𝗮𝘁𝗶𝗼𝗻𝘀 𝗳𝗼𝗿 𝘆𝗼𝘂𝗿 𝗻𝗲𝘄 𝘀𝗼𝗹𝘂𝘁𝗶𝗼𝗻!

Your product card is really good done, there's not much to say about it, but if you want to improve it a little bit more, you give it a better alignment with flexbox see the code below:

body {
    background-color: hsl(30, 38%, 92%);
    min-width: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

👋 I hope this helps you and happy coding!

👾Hello onyinyechukwu Jessica Malizu, congratulations for your new solution!

All you need to do to align the component is remove the margins and add flexbox.

Follow these steps, first remove the margins, then add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

body {
    min-height: 100vh;
    background-color: hsl(30, 38%, 92%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container {
    /* margin: 50px 20%; */
}

👋 I hope this helps you and happy coding!