Hey, just visually there are a few things off with your solution. to start the card isn't really center vertically an easy fix for this would be:
.card{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
@MahmoodHashem
Posted
@yoe7501 Hey bro, Thank you so much for your comment, I tried what you said but it messed up a little. Because I am new to frontend, so flex and grid are a little hard for me to understand. In the next challenges I will use them Inshallah