Hi James,
Ok thanks, here’s the issue
You added a max-height
to your Container, the reason the Chrome able to breach this max-height
is because of your 9.7% margins
on the images, which lead to the other issue where there is a big gap on the top and bottom of your logo.
I’ve corrected this and the header should look good on any browsers now. Please clear your browser’s cache if the fix did not take effect on your end.
Regarding the footer, the same issue with the Header but worse because here you’re using a lot of negative margins and unequal paddings, and irregular flexbox setup, although the footer looks fine on Chrome, this kind of setup will hunt you down the road (not to mention the issue you’re experiencing in IE now).
Please see the Triple Row Footer XSupport that I created, this is a duplicate of your footer with no negative margins and unequal paddings, the logos in there is aligned using only the flexbox layout.
If you want to learn more about the flexbox layout, please watch the tutorials below.
Flexbox for Rows and Columns (Part 1)
Flexbox for Rows and Columns (Part 2)
Layout Tricks: Auto-Responsive Columns (Part 1)
Layout Tricks: Auto-Responsive Columns (Part 2)
Remember to clear your cache.
Hope it helps,
Cheers!