Responsive landingpage with QR Code using flexbox

Hello! I've been reading your CSS code and I think there are some things you could change to make the code more readable and maintainable.

I recommend that you do not make this type of margins, since it can be difficult to read and in this case it is unnecessary.

img{
  margin: 0 10px 20px 10px;
}

In this case, to make the image the same width as its container, I recommend using max-width, and then add padding to the container and that's it. Although of course if you don't want to add padding to the container you can simply lower the max-width from 100% to 95% or 90% in the img element.

img{
  /*width: 17.8rem;*/
  max-width: 100%;
}

Now talking about the container:

.container{
  padding: 20px 20px 35px 20px;
}

You can improve the readability of this by doing something like this:

.container{
  padding: 20px;
  padding-bottom: 35px;
}

and also removing the border to the image is not necessary

img{
  border: 0 solid;
}

/*Final code*/

.container{
  padding: 20px;
  padding-bottom: 35px;
  background-color: white;
  width: 275px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  filter: drop-shadow(5px 5px 10px rgba(0, 0,0,20%));
}

img{
  max-width: 100%;
  border-radius: 1rem;
}

You can also add the property to center the text on the parent element of the h1 and p elements, to avoid repeating it twice.

.text-box{
  text-align: center;
}

I hope this helps!