QR Code Component Using CSS FlexBox

Hey ! Great work out there i just notice that you are using margin in main in order to center the qr code component but does not seem work , you are correct on applying display : flex on container but missing one properties to align that is min-height or height it is very crucial and important whether you want to align or in you case center something , by applying the height in container you can easily align the qr component easily. thats all happy coding !!

.conteiner {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 375px;
  min-block-size: ;
  min-height: 100vh; // add this
  justify-content: center; // add this
}

main {
  background-color: #fff;
  padding: 16px;
  margin: 70px 0; // remove this
  width: 320px;
  height: 492px;
  border-radius: 20px;
}