Responsive card challenge created from Figma design

What are you most proud of, and what would you do differently next time?

I am proud to learn how to center elements using margin: 0 auto Instead of using margin:0 auto, I would use flex box to center elements

What challenges did you encounter, and how did you overcome them?

Issue I came across is when using margin: 0 auto to horizontally center an element, it requires a specified width for the element to work as intended.

The margin: 0 auto rule sets the top and bottom margins to 0, and the left and right margins to auto. This automatically centers the element horizontally within its containing element, but it requires the element to have a specified width.

If the width of the element isn't specified, the browser doesn't know how wide the element should be, so it can't calculate how much space should be allocated to the left and right margins to center it.

In such cases, the element will simply take up the entire available width of its containing element, and margin: 0 auto; won't have any effect on centering it.

What specific areas of your project would you like help with?

I would like some feedback's on my CSS code and in what way, can I have written it differently to yield the same result: CSS Code