FrontEnd Mentor First-challenge QR Code Component WITH HTML & CSS

Hey ! Great work out there i just notice that you are using position and its related properties with transfrom-translate css properties in order to center the qr code component , i suggest that you can use display properties such as grid or flex much easier and less code if you want to center something. that's all happy coding !

.container {
  background-color: hsl(212, 45%, 89%);
  width: 100vw;
  height: 100vh; // you are correct adding this height since it is very important especially when you want to position a element but i recommend min-height to avoid some issue like overflowing content when the content reach 100vh.
  margin: 0;
  position: relative; you can remove this
  display: grid;// add this
  place-content: center; // add this
}

.holder {
  width: 330px;
  height: 480px;
  background-color: hsl(0, 0%, 100%);
  position: absolute;you can remove this
  top: 50%;you can remove this
  left: 50%;you can remove this
  transform: translate(-50%,-50%);you can remove this
  border-radius: 4%;
  box-sizing: border-box;
}

very cool, nice work as you say it's a simple challenge but for beginners may like me it's a big challenge.

Great Work, I really like how everything came out perfectly.