display: flex margin-left: 15% .card:hover

Hi @t3m4g,

Congratulations on successfully completing the challenge!

I have suggestions regarding your code that I believe will be of great interest to you.

I observed that you use the .center class to center the card, but it's not the most efficient way and doesn't center the card properly. Instead, you can add the following CSS to the body to center the card perfectly:

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

Also, instead of using margins to align elements inside .card, you can make .card a flex container and use flex properties to design it:

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* or any other property to suit your design */
    align-items: center; /* or any other property to suit your design */
}

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!