QR code component

Hi,

good job with the challenge! Here are some small tips if you want to improve your solution:

• If you want to get rid of the accessibility issue you can replace <p>Improve your...</p> with a <h1>. It is considered a good practice to use the main header on a page.
• Because you are using margin: 10rem auto; your content is centred but it's causing a scroll on smaller screens because the content is too big for it - because of the margin. You can fix that and easily center the div with flexbox. To do that you have to:

1. Remove margin: 10rem auto; from .container and remove margin: 0 auto; from .card
2. In .container add the following properties: min-height: 100vh; /*sets the content height to the full size of the screen but will expand when content is bigger */ display: flex; justify-content: center; align-items: center

Generally using flexbox or grid to center a div is considered to be the best way to center a div.

Let me know if you have any questions and good luck with future challenges :)