using css for style

REPLY:

• The card component is not aligned well
• During inspection i found that you applied unnessacary margin on .card

RESOLVING THE ERROR

• Resolve the following css styles
• Remove margin: 20% 5%; from .card component, it resolves misplacing of div
• Apply height: 100vh; for body tag, It resolves page overflow error
• Finally apply display: grid; & place-items: center; on body tag, which helps to center our .card with grid layout

MESSAGE:

• If my answer helps you then providing an upvote will be very helpfull
• I hope you learned a lot of stuffs during this project, Congrats brother

GREETINGS:

• Peace be upon you with god's mercy & blessings Mugilan nanba..✨

Hi Mugilan010, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

A good practice to center content is using grid or flex-box, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:

Flex-box:

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

GRID

body {
    display: grid;
    min height: 100vh;
    place-content: center;
}

The rest is great!

I hope it helps... 👍