Flex, media query

👋Hi Haddy!

I have some feedback on this solution:

• To make the card center both vertically and horizontally. I recommend to use flexbox or grid to do that.

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

/* OR */
body {
  display: grid;
  place-items: center;
  min-height: 100vh; /* To center vertically */
}

• For the .content width, I don't recommend to set it to 30%, instead I would recommend to set it to 100% and add padding-left and padding-right in the body element to prevent it full width on small screen. To make the content doesn't get too wide on big screen, you can simply add max-width to the content. That way you don't have to keep setting the width for every screen size.

body {
  padding: 0 1rem;
}

.content {
  width: 100%;
  /* 450 / 16 = 28.125 */
  max-width: 28.125rem;
}

• You don't need to set the root font size to be 16px, since by default it's already 16px. Also, it won't allow the user to control the size of the page. Set it to 100% instead.

html {
  font-size: 100%;
}

• I notice a commented code on your HTML file. Remove it. Development code is not a production code.

That's it! Hopefully this is helpful!