The `justify-between` class spaces out the direct children of a flex container. If you have more than two items or groups, they will be distributed with space between each.
Here, `justify-between` is applied to a container with three direct child divs. Notice how all three are spaced apart, not just the first and last.
This behavior might be unexpected if you wanted "Item 1" and "Item 2" grouped on the left, and "Item 3" on the right. `justify-between` works on the immediate children. "Item 2" becomes the middle element that gets space around it.
To push a group of items to one side and another item/group to the other, you can nest flex containers or group items within a parent div.
Here, the "Logo" and "nav" are wrapped in a `div`. This wrapper `div` becomes the first flex item. The "Login" `div` is the second flex item. Now, `justify-between` on the parent correctly pushes the "Logo/nav group" to the left and "Login" to the right.