I’m referencing a bug (that was also posted about back in 2016: Justify Space Between - incorrect) that I noticed immediately when opening the webflow editor.
The webflow default container element, the “.w-container” (also included by default in the nav component), has flexbox bugs because of the :before and :after pseudo elements applied to the .w-container (details below):
The bug that I discovered deals with the justify-content property on a flexbox element.
When setting an element to:
display: flex;
justify-content: space-between;
The expected behavior is that child elements are pushed to the edges of the container like so:
If we set the same property on the .w-container, this happens:
You can see the elements don’t act as the should, but act more like
justify-content: space-around;
But if I turn off those strange pseudo elements…
display: none;
BOOM! Victory… sort of…
I’m guessing those pseudo elements are being used as a sort of catch-all clearfix or something. There’s probably some mysterious editor magic happening here.
The work-around is to simply to create a div block with it’s own container class with a max-width and auto margins, which is fine… but annoying for an ornery perfectionist like myself.
Hopefully, reopening this issue and pointing to the problem will help it get fixed. Rooting for you, Webflow! Do the thing!
Here is my site Read-Only: https://preview.webflow.com/preview/playground-3da178?utm_medium=preview_link&utm_source=designer&utm_content=playground-3da178&preview=04a7440869577e51848600963f5cc9f9&mode=preview
Live site: https://playground-3da178.webflow.io/
Console:
Cheers!