3-Column-Preview using html and css

Hello, Michelle! 👋

Good effort on this challenge! 👍 Your solution looks great! 👏

However, I recommend refactoring the CSS by following this guide.

• First, you don't need absolute positioning. It works well here, however, in a large project (like landing page challenges), it would be a pain to position every element with absolute positioning, especially in making the layout responsive. So, to make the card in the middle of the page you can use flexbox instead of margin and position properties and use padding to control the position of the element inside the card.
• Second, the element that wraps all the cards only needs a max-width to prevent the cards from becoming too large.
• Third, every card doesn't need width and height. For width, since it's a block element it will for sure have width: 100% so it will follow the max-width of the parent element. For height, let the element inside it controls the height of it. After that, add padding to prevent the element inside it from touching the edges of the card.

For the HTML, I recommend leaving the alt empty for all icons because they are only for decoration purposes.

That's it! Hope this helps.

I would definitely check out flexbox to make things a little easier! Makes centering and laying out elements nice and easy

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Really good visual practice tool https://flexboxfroggy.com/