QR code component solution using Flex box

What are you most proud of, and what would you do differently next time?

I learned how to use Flexbox on multiple occasions. Responsive design is one of my weaknesses, so I tried my best to implement it through this challenge.

I tried my best to use rem and vh instead of px (rem still confuses me every time).

What challenges did you encounter, and how did you overcome them?

I had a hard time using Flexbox. Sometimes I'm still confused between justify-content and justify-items. I was trying to put the element in the center horizontally and vertically. I successfully centered it horizontally, but for some reason, it sticks on top of the document. Then, after some googling and trial and error, I wrapped the container in another container, set the height to 100vh, then set the display to flex. After that, I can finally center it not only horizontally but also vertically.

Another thing that I'm still not comfortable yet is adding a box shadow to a container.

What specific areas of your project would you like help with?

I wanted to be comfortable using rem units and flexbox. Rem units still confuse me, even though I have already taken many lessons on them.