QR code component using margin auto and padding

This is the time to focus in on learning html well.

1. All content should be contained in landmarks. The card should be in a main and the attribution in a footer.
2. The card could be a section if you want but there shouldn't be a section within it. (The heading and paragraph actually don't need wrapping in any extra element if you want).
3. Make sure the alt text on the image is descriptive enough. This needs to say what the image is (QR code) and where it goes to (to FrontendMentor.io).
4. I recommend you include the css reset at the start of your styles. There's no need to make an extra server call for a whole other file.
5. To center the component on the screen make the wrapping element (eg body in this challenge) a flex column, min height 100svh and use flex properties to center its children.
6. The card must not have a height. Never limit the height of elements that contain text. This will currently break for users with a different text size or if authors included more content in a card. Let the browser do it's job and decide what height is needed based on the content inside the card.
7. The component should not have a width either (unless 100%). It should have a max width in rem. This allows the card to shrink narrower when viewed on a small screen and using rem means it will scale correctly even if site visitors have a larger default text size.
8. Font size must never be in px
9. Using percentage for padding takes away all.of your control of the layout. Use px or rem.
10. The margins left and right on the paragraph seem strange... I can't think why they are there or have different values. It would be more usual to have max width in ch units and margin-inline auto for centered text if you wanted to limit its width in some way... But Im not sure what the intention was there.

Nice design with clean code!

yes it does.i want to learn and practice more all the time.improve on semantic tags