Actually, the header issue is also happening on Chrome and Firefox, my first advice is to CLEAR and Deactivate all you caching plugins/features and your browser's cache to see things as really how they are. Caching is not advisable to have when the site is still in development.
Now, I checked your header and footer and I see that you over-complicate things, I understand that you choose to code those footer menu manually so you could style/layout it were you see it fits, but you did not you just lay it out there like a paragraphs
Please create these as a menu instead (Appearance > Menus) and add it on your Footer using the Navigation Inline element. I also see that you added it in just one container, please place those menus to each of its containers instead.
The same thing on the header, but the cause of the issue on the Headline getting overflow is because the Header is set to fixed height, so even if the header needs to expand to accommodate its content, it can not, because it is set to a fixed height (not responsive).
Try that as
height: auto. And the negative margins that you applied did not help your case, it actually brings more issue than fix.
Overall this is not just a one browser issue, but how you set up things. My advice, for now, is to learn how the Flexbox works.
A Complete Guide to Flexbox
I understand that Flexbox is a very confusing subject at first, but once you learn it you'll going to fix those issue in no time, those issue might not happen in the first place.
Have a nice weekend,