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.

How to Fix the Woocommerce Plugin Fatal Error 

I have been having problems with the Fatal Error “White Screen” for a while on my website. It’s been an annoying problem when I’m trying to update and maintain my website. As usual, I went to Google to see about a fix for the WordPress and WooCommerce errors. After searching, I found a solution in a post listed 2 years ago. 

Continue reading “How to Fix the Woocommerce Plugin Fatal Error “

Website Built with

Up ↑

%d bloggers like this: