I’ve created a Flexbox in my header with padding set to 0 5%.
For whatever reason in higher resolutions, the padding is increasing to around 10%. This doesn’t make sense as I have flexbox set to space-between and it set to take up 100% of the width.
I’ve posted a secure note below with the link and further explanation.
Hello There,
Thanks for writing in! To have more information on how we have used Flexbox in the builder, please review this thread as it could help you set up your header in the builder.
https://theme.co/apex/forum/t/pro-tips-and-tricks/214
Hope this helps.
Hi there,
That’s how flexbox works, your max width is set to 1440px and it doesn’t change and it’s centered. As the screen gets larger, the menu stays in 1440px and the layout isn’t, hence, it’s not adding any space, it’s just that your menu is maintaining its centered position.
You have set your theme’s max layout to 100% max width, but you set the menu to be 1440px only.
.x-container.max {
max-width: 100% !important;
}
So imagine the layout goes beyond 1920px (100% of the screen size), but your menu stays on 1440px and centered. Then that’s what you get, 1920px - 1440px = 480px, since it’s centered then 480px / 2 = 240px. Hence, there is available space of 240px, it’s not an added space, but remaining space due to the difference of your layout and your menu width.
You can confirm that by viewing your page in large screen and your content goes all the way, but your menu stays small. Hence, the solution is, don’t apply max width on your header, or simply set your layout width to 1440px too.
Plus, you only applied max width to your bar container, hence, the bar is still full width.
And because of that, 5% padding could increase, example, if you have screen that 1360px, its padding will be 1360 x 5% = 68 + flex alignment, where in 1920 x 5% = 96 + flex alignment. Much larger since it’s based on percentage, plus, it’s a flex layout where alignment is different from the standard layout which greatly affect spaces (stretched, fill, no-shrink, and etc.).
So the other solution is adding pixel base padding, I tried 20px and it looks good. 
Thanks.
Thanks very much for the thorough response. It’s greatly appreciated. And my apologies for my previous snarky comment. Trying to figure this out has almost given me a stroke.
I’m a bit unclear as to your explanation. On my screen, I set the red navigation bar to be 100% or a max-width of 1440px. That appears to be working as the red nav bar stays the same width as the picture below it which also has a max-width of 1440px. So that seems to be working fine. But the padding inside the red bar is clearly a different story. I want the padding set at 5% but based on the position of the logo and the cart, it appears to be more at 10%.
From your response, I understand you to be saying that the padding is NOT 5% of 1440px (i.e. 72px on each side) but rather 5% of 1920px (96px on each side). Is that an accurate statement of what you’re saying? If so, can you clarify where the 1920px figure is coming from?
Hi There,
You’re always welcome! We understand if you’re a little frustrated if things is not working the way you want. That’s why we are here to help.
This is the explanation why it increases: https://teamtreehouse.com/community/why-did-the-div-width-increase-when-padding-was-added-with-a-max-width-shouldnt-it-have-stayed-the-same. I know you’re expecting that since you have set max-width, even on large screen it should stay the same size/width. But it’s not the case and it will add padding on top of it. It is a different setting that works that way which is box sizing
Could you please delete the screenshot you included as I do not want it available to the general public.
Hi there,
We moved the screenshot to the secure note. So it is not public anymore.
Thank you.