border-radius,margin,overflow,@media,display

You could center the QR card by using the absolute positioning and then fixing the top and left properties. something like:

#qr-card { position: absolute; //so the card could be placed relative to the parent element, i.e., in this case the html page

top: 50%; //so the card is shifted to half the page vertically from the top left:50%; //so the card is shifted to half the page horizontally from the left

transform: translate(-50%, -50%) //so the card is shifted left and up half of its width and height for optimal centering }

Great work, although I feel it would be better to have used multiple divs for multiple elements rather than having them all under one div tag