QR Code Component - using Flexbox and CSS variables

Some recommendations regarding your code that could be of interest to you.

You can reset the code initially

• { box-sizing: border-box; margin: 0; padding: 0; } If you want to make the card centered both horizontally and vertically, you'd better add justify-content: center and min-height: 100vh to the body body { /* font-weight: 400, 700; / justify-content: center; min-height: 100vh; } If you use flexbox in the body, you don't need to use margin in the .container to center the card If you use max-width, the card will be responsive and you can reduce the width a bit .container { / width: 350px; / max-width: 300px; / margin: 50px auto; */ text-align: center; }