Coding: Why isn’t my space-between ‘space-betweening’?

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.

Picture of web page
Picture 1: Section before I removed the empty div elements.
Picture of web page
Picture 2: Section after I removed the empty div elements.

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!


Signature in Burgundy cursive spelling out T. Lanette.

Reblog: The Five Inconvenient Truths of Web Design

Here’s the thing: There will always be someone else out there who, according to our own perception, created a better portfolio or has demonstrated a more intricate knowledge of code. Some may take this as proof that they aren’t good enough and don’t deserve success…But the web is a big place. Another person’s perceived expertise doesn’t disqualify you from anything. You can still be great at what you do, regardless of what anyone else has achieved.

Eric Karkovack

I stumbled across this article by accident. However, after reading the quote above, I knew I was in the right place.

Continue reading Reblog: The Five Inconvenient Truths of Web Design