The reason is because you have a left and right margin of
10vw in the two
<div>s that contain the information in the footer, and that the container is of fixed width. I suspect that you are doing that because you want to space the two
<div class="topFooter__item">s out evenly.
The better way to go about this is to remove the left and right margins completely for the two
<div class="topFooter__item">s and just rely on flexbox’s
justify-content: space-around completely. To do that:
- Remove left and right margins for the
display: flex for
<div class="topFooter"> because it’s not actually doing anything (well, other than making things difficult!)
<div class="footerMiddleHolder>", add
And that should fix the issue!
Perhaps worth noting, since you are already using flexbox, is that if you ever find your self creating the 1-dimension layout by using margins similar to what you have done, there is most likely a more elegant solution using flexbox.
I hope that helps!
EDIT: @SnowdenWintermute—and I wanted to say, but forgot to earlier, that the artwork is really cool!