QR code component solution using CSS Flexbox

div tag with class container should be the direct element of body tag i.e <div class="container"></div>

use landmarking tags such as nav, header, main, footer to help with accessibility.

don't use section tag directly inside body tag

I suggest you don't give the container a fixed height of 100vh

Just use display:flex; and center it by specifying justify-content: center; and align-items:center; on the container.

You can add padding to the container. This will prevent your bar from using full 100% width on mobile.

on you card component, you could set max-width: max-content; to prevent getting too big on larger screen.

You could check my version of this and leave a comment.

I hope you find this useful 😊

Good day Assem. I also had the problem centering the box. However, I solved it by setting both html and body's widths and heights to 100% and then by applying flexbox properties I positioned it to the center of the viewport. Give it a try. I'll be delighted if I could be of use.