Space between Flex Box is not working

Howdy all. Quick note that the Webflow Container element is a “non-ordinary” node, which means it has :before and :after pseudo elements inside. These also get counted when the user applies flex settings. (Same for the Navbar container.) In other words, this is expected behavior and not a bug.

You have two options to fix:

  1. As @vincent suggested, just throw an extra div inside your Container, and apply flex to that
  2. For the children inside the Container, you can apply First and Last to the corresponding children, and this will remove the extra unnecessary space on either side of those elements. See included image below:

Screen Shot 2022-02-08 at 11.12.33 AM

2 Likes