QR code Component beginner HTML & CSS

Hello there👋! Congratulations on completing this challenge!

The code seems to be correct other than a commented section. The letter-spacing property for .content-p is set to 0.06rem but it is commented out. To fix this, the comment should be removed or the property should be uncommented.

Here's the corrected code:

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background-color: #D5E1EF;
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
}

.card {
  background-color: #FFF;
  border-radius: 1.25rem;
  font: .9375rem Outfit, sans-serif;
  text-align: center;
  max-width: 320px;
  padding: 1rem;
  box-shadow: 0 1.56rem 1.56rem rgba(0,0,0,.1);
}

.qr-code {
  border-radius: .63rem;
  width: 100%;
}

.content {
  margin: 1.5rem auto 2.5rem;
}

.content-header {
  color: #1F314F;
  font-size: 1.375rem;
  font-weight: bold;
  letter-spacing: .07rem;
}

.content-p {
  color: #7D889E;
  margin-top: 1rem;
  letter-spacing: .06rem;
  padding: 0 1rem;
}

Anyway, your solution is great. Hope you will find this helpful. Happy coding!

You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

.container {
  display: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful