Responsive three columns cards

I think your issue here stems from coding the challenge out desktop first, which makes things a little more difficult as the screen size reduces. Coding your projects mobile first is a good habit to get into.

In terms of the issue itself, I think the flex-wrap is causing the problem alongside a lack of flex-direction. I would remove the flex-wrap and set the flex-direction to 'column' on your (max-width:800px) media query - this should remove the need for setting widths on each of your sections.

Great 👌 work ☺️ @Daniel

I am on mobile so I can't inspect your project but I am giving some suggestions 😊

• when the button is hovered then you are giving it a border which is moving elements around it which is not good for UX, so you may do this

.btn {
    border : 2px solid blue;
};
.btn : hover {
    border-color : #ffffff;
}

This way you are already giving it a border of same color as background but when hovered, the color of border gets white or as per the design and not actually creating a border

• Use Irfan view to measure the layout from the design image they provide

Hope it helps and happy coding 😉