QR-code-component-main

Replace <div class="container"> with the main tag and <h3> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

To center .container on the page using flexbox or grid instead of margin,

• USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

• USING GRID: Add min-height:100vh; display: grid place-items: center to the body

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

For a responsive content, replace the width in .container with max-width, give the img a max-width of 100% and increase its margin value. margin: 16px.

Give text a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top or h1 a margin-bottom value for the space between the text.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hey there 👋 awesome solution!

If you would like to get rid of the accessibility reports you can do this:

1. change your div with the class of "container" into a "main" element.
2. Instead of using an "h3" you should change that into an "h1", because it is always best to start off from h1, then to h2, h3 ...etc.

I hope this got rid of those reports! 👍

You can avoid the warning: "All page content should be contained by landmarks" by changing <div class="container"> to <main class="container">