QR component using CSS Flexbox and Google Fonts

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• Using display: flex; is a very common way to center elements. Another alternative is to use the grid layout.

  body {
    display: grid;
    min-height: 100vh;
    place-items: center;
  }
  

  Another way to center an element is using display: absolute but it may introduce issues on smaller devices. The component might overflow or cause layout problems.

  If you choose to use margin: auto; for centering, keep in mind that it won't center vertically, only. For vertical centering, you can use flexbox with margin: auto:

  body {
    display: flex;
    min-height: 100vh;
  }
  
  .item {
     margin: auto;
  }
  

I hope you find it useful! 😄

Happy coding!