QR-code-component

Hello Sumedha, congratulations on completing your first challenge here on Frontend Mentor, welcome to this community.

Regarding the challenge you had in aligning the content, you used margin, but that's not the best possible way, and I honestly don't recommend it much. I recommend using flex. If you choose to use flex you could do this:

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

Then you could remove the padding from your card.

In summary, min-height will make your body the size of the screen vertically. And justify-content and align-items will center your content, to use them you need to use flex, they don't work without this display, and be careful when using them, depending on the flex-direction, they change the axis.

This text "Improve your front-end skills by building projects..." that is outside the card can be removed at the end, it is used so that you don't have to keep copying the text, and can simply copy and paste.

And again, congratulations and welcome, I hope you enjoy the community here very much, and can learn more and more each time. If anything I said is confusing, please comment below and I will try to help in the best way possible.