using flexbox css

you forgot to give the body a background-color.

For a responsive content, give .cards a fixed max-width value. max-width: 600px. there is no need to give .cards overflow: hidden and justify-content: center. Give .card a padding value for all the sides.

Give h1 , p and the button a margin-top and margin-bottom values. In the media query reduce the max-width of .cards.

Always begin with the mobile design first it will make the process a little bit easier.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hi i found some things in your code that might help you with the button problem -- .card has padding of 30px which is pushing buttons in small width -- and .cards also has a width of 70% thats causing the same thing .. Hope it helps

P.S you are doing good .