flex

Nice job on figuring out how to center the card with flexbox.

This is another method of centering an item with grid:

display: grid;
place-content: center;

You can remove the height: 70% from your product container, it only stretches the card too large on larger screens, and squishes it on smaller screens.

Try adding media queries for the smaller screen sizes, or better yet, make mobile your starting point and work your way up to desktop size with media qieries (one or two should be more then enough for this challenge, just mobile and desktop I should think, maybe add a tablet in between.)

You should take a look at the issues in the report. Look at the learn more to read some more information about the issues. These can help you with the basics.

Happy coding!