All solutions

Added the landmarks as suggestion per previous solution results

I found it difficult to align the qr component in the center vertically so I did a bit of searching around and found a solution on Stack Overflow, which was to use absolute positioning and set the position to 50% and use transform translate by -50%.

I am wondering if this is best practice? I am able to center content using flexbox but this only seemed to be working horizontally and not vertically. When using align-content it didn't seem to move. I thought maybe I needed to set a height for this to work but it didn't have any effect.

I had originally created padding around the qr image however this created problems with the border-radius, so I changed this to margin and set the image to 90% width instead.