3 column card using HTML and CSS/Flexbox

Hello Tyler,

Congrats for completing another challenge ! 🙂

In addition to the great feedback of @tediko, I would suggest to add more padding to your buttons to match better the design and font-family: inherit to override the default font.

Also, I would change the break point on the media query as the content overflow the screen between 500px and 1100px.

Overall, well done for the challenge and happy coding ! 😃

Have a nice day 🌞

Hello, Tyler! 👋

Add another div and wrap your .cointainer into that. Then to that new div add these styles, it'll center your container:

display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;

After that, you have to remove styles from .container and make this element to be flexible.

display: flex;
flex-direction: row;
max-width: 1110px;
width: 100%;
padding: 12px;

Remove width from .panel element. And also remove margin-right: 200px; from .pic element because it causes your element isn't scalable.

Now we have to work on media queries. Remove the currents one and add media query for 700px width for our new div and set align-items: unset;, then for .container for 700px width set:

display: flex;
flex-direction: column;
align-items: center;

and lastly add max-width: 360px; to your .panel.

Good luck with that, have fun coding! 💪