All solutions

This is my first time using CSS grid, so please let me know if there's anything I can do to fix this.

Everything was working great until it came to centering the cards on a large screen. I noticed it was centering the root component which was surrounding the sedan card, and thus centering the cards starting from the sedan card. Since the SUV card is the middle card, it should be centered from the SUV card. To fix it I moved the root element to the left but there must be a better way to tackle this.

I couldn't get the card to center on the screen. I spent a couple hours on this trying different things like margin-auto and align-items-center on a parent div and looking around online, but to no avail. Hopefully here someone can help me. Also, are there things I can do to tidy up my code? Thanks guys!