QR Code Component using CSS and Flexbox

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

• In order to center the card, you can add flexbox and min-height: 100vh to the body

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

• After adding them, you don't need to use margin in the .container to center the card so you can remove it

.container {
    /* margin: 100px 500px; */
} 

• Finally, you haven't used <main> tag in html file, so you can remove it from CSS file:

/* 
main {
    background: hsl(212, 45%, 89%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
 }
 */

Hope I am helpful. :)

Azeezat,

Your solution looks great! And it does respond to width changes. There is a bit of a problem with responsiveness to height, though.

Your div.container has height 60%, while the contents don't scale the same way with height. A better solution might be to remove the "height" property, allowing the box to size to the content, and use padding to keep the negative space as the design requires.

I'm not a professional myself, so keep your eyes out for comments from others.

Matt