QR Code Component w/ Flexbox

Your site's dope, as for best practices I think one thing you could've changed in your HTML was the div you created then gave a class of main, there's an actual tag with the name of main, it's a semantic tag that'll function just as the way your div with the class of main worked the main tag is the ideal tag to use in that scenario then in your CSS : .qr-info { margin-top: 20px; margin-bottom: 20px; padding-right: 20px; padding-left: 20px; } I saw you already used the shortcut way of using these but you didn't here, i.e .qr-info { margin: 20px 0 20px; padding: 0 20px; } Or even better you can use the logical properties i.e

.qr-info { margin-block: 20px; padding-inline: 20px; }

1. Like LENI4C said, using better semantic tags like main for the component and footer for the attribution. Here is the doc on MDN
2. Use rem for font-size, here is an article Why font-size must NEVER be in pixels