Flex items having unwanted space between them seemingly out of nowhere

I am trying to have a set of 5 pictures with captions sit together within a container of 1000px width, each image is 300px in width and should be able to have 3 sit next to each to each other in its row and the other two wrap to the next line, however there is some unexplained space between them.

I cant for the life of me figure out why my flex elements within the container are not sitting together closely.

html in question from line 36-61

css in question (I think) is from line 45-61

link to how the website currently looks


Hi! It looks like the “figure” element you are using has a margin by default and that is creating the space between your elements. You likely need to add a style to remove the default margin of the element.

I hope this helps!


great! that fixed it thanks!