Hi Everyone,
I am working on the portfolio page project for freeCodeCamp and I have run into a problem with my buttons aligning strangely when the width of the window gets to about 1200-1500 pixels. Instead of being in a row like I want them, they become a 3 on top, 1 on bottom thing and then if you go wider, a 4x4 grid.
I tried changing the width of the wrapper div (topFooter__item) to ensure they have enough space to display. It did not seem to have any effect.
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:
topFooter__item classdisplay: flex for <div class="topFooter"> because it’s not actually doing anything (well, other than making things difficult!)<div class="footerMiddleHolder>", add justify-content: space-around
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!
.footerMiddleHolder{
display: flex;
flex-direction: row;
max-width: 1500px; //changed this value to 1500px
margin: 0 auto;
padding: 0;
}
@media (max-width:1023px){
.footerMiddleHolder{
flex-direction: column;
}
.topFooter__item{
padding-bottom: 3vw;
}
}
.topFooter__item{
max-width: 1500px; //changed this value to 1500px
The above solution may be better in the long run.
Thank you so much for helping! It works perfectly. I am still new to flexbox and never tried the space around feature before.
The artwork is my mom’s. I’ll tell her she has a fan!
Is this in addition to @honmanyau 's technique? I see you have changed the max-width to 1500px from 1023px. Is that because desktop monitors are getting to be higher res?
I see! The best way to learn is just to make a simple Pen and experiment with it; you may also find part of this article helpful.
And please do tell mum (my favourite is item 5)!
Good luck!
Good read, thank you for the suggestion. I am now playing the grid garden learning game they linked at the bottom 
No this would be a separate solution.