My First Frontend Mentor Challenge for QR Code Component Challenge.

The <center> tag is no longer supported by HTML. It was used to center text, not to hold content. Try changing it to something like <main> for example. If you want to then center the content, give your main the following:

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;

and give your body a height of 100vh so that it takes the full height of the screen.

Remove the following from the card:

    max-width: 17%;
    margin-top: 160px;

Be careful when setting max-width especially when it's to a small percentage like "17%". It can lead to content that is too narrow. Try to use more controlled values. I usually use clamp when I want to have fluid sizes with min and max values. An exampled would be width: clamp(300px, 25vw, 375px);

Remove the hardcoded width on the img and give it a width of 100% to make it fluid and consistent when the card changes sizes. Then give it display: block;. It makes working with images easier and removes a little bit of extra white space under it.