QR-code

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

Give the alt attribute in the img a value.

There is no need to give the body a margin value. To center .container on the page using flexbox, replace the height in the body with min-height: 100vh.

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

Give h1 and p the same font-size of 15px which is 0.9375rem, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

For a responsive content which wont require a media query for this challenge ,

• Give .container a fixed max-width value max-width: 320px which is 20rem/em
• Give the img a max-width of 100% and a border-radius value, the rest are not needed.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Olá Mohd Ayaan, para uma visualização responsiva você poderia colocar as configuração css do boby dentro de uma nova tag de preferencia semântica. e usar o min-height: 100vh; para pegar toda a tela. :)