3 Column preview Card - HTML and CSS

Container does not have a width given that's why the text is moving. However it does not center if you do.

A tip: When you are making similar designs for each card, give them all the same class name. You can implement more than just one class to each. For class "item1" "item2" "item3". Instead write: "card item1" "card item2" "card item3" Now card and item are seperate classes for the element and can be good for organizing in css.

So I use the class "card" for setting the width, height, and the padding for each card. You can set height to auto/height:auto and work through using margins for the text or just set a determined height. Usually recommend height:auto Then I use "item1" to design that specific card's color and image.

Don't text-align:center on body. I usually do it on specific areas. But you can set the font-size and font-family there. check the style-guide thats given.

Also its good practice to start designing by mobile first so that it can be responsive. Simply remove the display:flex on container and you have atleast a template for what the mobile design would be like. Then use ex: @media (min-width: 50em) { .container { display:flex; } for the desktop version. }

This means when the screen hits 800px, the container will become display:flex. (You wont need to repeat any code just need to position the elements to row)

You can look at my solution's html and css. However there are simpler solutions on github and they really do help make you understand the structure if you go through them.