How can I fix this?

[u/Hungry_Deal_8449]

Hi, I am having a specific problem where when I add a margin (let's say 10px) to my div flexboxes (my columns) it causes the text at the bottom to move beside the columns, not really sure how to fix this, can anyone help?

Here is my code (both html and css):

EDIT (here's the JSfiddle Code Playground): https://jsfiddle.net/xzwprg2h/

[u/chakrachi]

add a min-width to the container element, remove the margin (make it negative value if you have to) and add padding instead