3 Column Preview Card

HTML:

• There should only be one <h1> on a page. Given there are 3 similar headings, I would change all of them into a <h2>.

• "Learn More" would navigate to another page, hence it is not a button but a link.

CSS:

• It's good practice to include a CSS Reset at the top.

• You don't need to set width: 100% on main, as it is a block element, which are 100% wide by default.

• height on main should be changed to min-height - this way, the content will not get cut off if it grows beneath the viewport.

• Remove all width and height. Add a max-width in rem on the card container to prevent it from getting too wide on larger screens.

• Instead of justify-content: space-between on .card, I would use a gap of a couple of em/rem.

• It is good practice to do mobile styles first, and use media queries (in rem instead of px) for larger screens.