CSS Flexbox

Hey, first off your solution looks really good as it is so good job! You said you found positioning elements in the center tricky, I agree, but using flexbox really helps here. I see in your solution you are already using flexbox so you're already partially there, there are just a few tweaks which should really help. On the class qr-section you can remove the 'margin', 'max-width' and 'max-height' properties and replace them with 'height: 100vh' and 'align-items: center' and that's it, the card will now sit nicely in the center of the screen. By setting the height of the section to be the full height of the viewport, flexbox now has enough room to calculate and position the content in the center by using 'align-items: center'.

For a better explanation you could check out this article on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction