QR Code Component with vanilla HTML/CSS

Great work!

Answering your questions:

• This is a good solution, sometimes vertical padding differs from horizontal, even so you eyeballed, looks good.
• I saw that you use a display:flex on your body, although it needs more than that to center the content. To do that add to body: justify-content: center; align-items: center; height: 100vh;. Remember with 100vh you are saying to your body to use all the view port, that means it will center your content.
• About css rules and elements: If you have a list, you should create a class to style your <li></li> elements. If you ever need again to create a list as above, then you can re use your class, otherwise create a new one for the new element. So, you can extract styling for different elements and create some shared classes that cover everything, like a success button or an error button, at the end they should have some similarities, but differs it another ways.

Good job, keep it up! :)