All solutions

While designing a solution for a 3-column-preview-card I faced two difficulties:

1. using 'margin: auto; ' didn't bring the container of cards to the center
2. display:flex; justify-content: center; align-items: center; This brought the container to the center horizontally, but vertically it was still stuck to the top of the screen. So had to use 'margin-top:9rem; ' to bring it to the center. Why both the cases didn't work properly? Is there any other solution to bring the container to the center? When hovered on Learn More button size of the respective card is slightly increasing. All feedbacks and comments are welcome.

Please go throw my solution for the NFT preview card. All feedbacks are welcome.