qr-component using html and css

To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

To center .container on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

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

Nice solution, the only problem i could see when reducing the viewport width is that you're using a margin-left: 40%, this causes your card not to be centered at some point. I'd like to recommend you to use margin auto on left-rigth if you wanna keep centered your card, of course there are other options like justify-content: center if you're using a display flex o something like that. :)