Responsive web page

Hmm... your solution looks great. Just try giving the body

        height: 100vh;
       display: flex; 
       justify-content: center; 
      align-items: center;

Hello

First, this solution looks great! So these are just optimisation ideas, not things that are "wrong"

1. This doesn't really need a media query. If you set max width on the card and make sure it has a little margin (or its outer wrapper has a little padding) so it can't touch screen edges that would be the same code for all screen sizes.

2. I'm not sure you're understanding when to use padding vs margin. Maybe read up on the box model. Padding should be on the card, it stops things hitting the edges of their wrapping element. Margin top or bottom is then used on the inner elements to vertically space items inside the card like headings and paragraphs. Margin will 'collapse' meaning you could have margin bottom on a heading and margin top on the paragraph below and those margins would share that space (as long as they are not children of a flex element). If you used padding to separate those elements, the paddings would be added together creating double the space

If you wanted a cool snippet for creating vertical space between child elements you can even do something like this:

.card > * + * {
  margin-top: 1rem;
}

That's saying give every direct child of the card some margin top except the first child. The only downside to that technique is it's very specific css so makes it harder to override if you wanted to change a margin on one element inside

I hope this is interesting and helpful for you. Good luck on the next one!

Impressive work! 👏