QR-code-component (HTML + CSS)

Hi, @nerdy-guy!

You can very easily center your container using flexbox or grid on the parent container:

body {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

or

body {
   min-height: 100vh;
   display: grid;
   place-content: center;
}

This way you do not need to use margins to center you containers, it centers it in the parent container.

Also try to avoid using px values as much as possible and use rem instead.

Hope this helps!

Hi Ahmed Arafa, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

To improve the responsiveness of the project, we are going to make some changes to the project:

.container {
    max-width: 330px;
    width: 100%;
}
img {
    max-width: 300px;
    width: 100%;
}

The rest is great!

I hope it helps... 👍