QR code page using CSS Flexbox

Hi, @otimdan,

I took a look at your solution and wanted to share some thoughts:

• Your .card isn’t centered on the page because the body doesn’t fill the entire viewport. The viewport is the visible area of the web page. To ensure the body occupies the full height of the viewport, you should apply min-height: 100vh to the body. This is a good practice because it guarantees that your layout will be responsive and adapt well to different screen sizes. You can also make the body a flexbox to center your .container like this:

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

• Additionally, consider using semantic HTML elements instead of relying solely on <div>. Semantic elements, like <header>, <footer>, and <main>, provide meaning to the structure of your document and improve accessibility, making it easier for both developers and search engines to understand the content.

Let me know if you have any questions! Hope this helps!