Had some difficulties to center everything.Would love any kind of help

Hey bro, nice to meet you

body {
  background-color: rgba(213, 225, 239, 255);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  align-items: center;
  display: flex;
  justify-content: center;
  /*! margin: 14rem 20rem; */
  font-family: 'Outfit', sans-serif;
  width: 100vw;
  height: 100vh;
}

.container {
  background-color: white;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*! height: 100%; */
  /*! width: 25%; */
}

img {
  /*! width: 66%; */
  /*! height: auto; */
  /*! border-radius: 1rem; */
  /*! margin-left: 4.4rem; */
  /*! margin-top: 1rem; */
  width: 20rem;
  border-radius: 0.5rem;
}

h1 {
  color: rgba(104, 111, 125, 255);
  font-size: 1.35em;
  text-align: center;
  width: 25rem;
}

p {
  color: rgba(150, 155, 161, 255);
  font-size: 0.95rem;
  text-align: center;
}

.qr-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  padding: 2rem 0.5rem;
}

I've edited your app's css stylesheet, I've highlighted the changes within "comment blocks" and since I've seen that you like to work with flex, I adjusted the solution using it.

If you want to go through it in detail, let me know

Hello @Shuhratov!

Congrats 🎉!

Here are some suggestions..

1.Remove the margin from the body, never put any margin on the body or the html.

2.Remove the width from the H1 element, instead adjust your font-size

3.Increase your container’s width or set a max-width instead to make it bigger than the elements inside

4.Make your image display: block;

body {
  margin: 0;
  margin: 14rem 20rem;
}

h1 {
  width: 25rem;
}

.container {
  width: 25%;
}

img {
  width: 66%;
  height: auto;
}

Hi there @ShuhratovSuhrob, congrats on completing the challenge. In order to properly center the qr-container element, I would recommend that you use CSS flex-box or CSS grid. With CSS grid, the styles should look something like this container styles

.container {
display: flex; 
align-items: center; 
height: 100dvh;
}
                         

qr-container styles

.qr-container {
max-width: 300px; *setting a max-width ensures that the element doesn't grow past 300px*
margin: 0 auto; or margin-inline: auto;
padding: 1rem;
border-radius: 1rem;
*all other styles*
}

I noticed that you didn't create a reset to override the default styles. different browsers interpret styles differently. A reset sets all basic styles (like margin, padding, font size) to the same starting point, like preheating your oven, so your website looks the same across all browsers. This helps avoid surprises and makes your life easier! A basic reset might look something like this

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

But it doesn't end there. Resets can be created to target specific elements like in this article about modern CSS resets Modern CSS resets by Andy Bell. I just created a YouTube channel where I do frontend challenges and this one was the first one I did. Feel free to take a look Qr-code-component-solution

Hello, you can solve this problem by setting the container width to 300px to make it fixed.

have a nice coding !