I spent two hours last night trying to figure out why my space-between wasn’t putting the space between my elements in my flexbox container. I checked my code and readjusted the sizes of my elements. Yet my two elements were spaced as if they were only on one side of the page. Yes, they had space between them. However, their alignment relative to the entire section was… off.
I finally decided to close my Mac and try again the next day. As I lay in bed, I gave it one more try and started to research an answer to my issue. I Googled, “Why is flexbox space-between not working?” and ended up on StackOverflow. When I found out the answer, I couldn’t believe it was so simple. It came down to… an empty div element. All that chaos was caused by empty div elements in the flexbox container. So, my space-between was working. However, in the first picture, the empty div elements were part of the spacing. Once I took them out (Picture 2), the elements had the spacing that I needed.
I understand this may be obvious to some. However, to a new developer, this issue could cause total coding chaos. Now I know when you use justify-content: space-between it will justify all of the elements with and without content. Happy Coding!
BovaryCee 
Leave a comment