Issue with how my Global Header renders in Mobile

I have a global header, which I am happy with on desktop. However, when I am editing the mobile and tablet versions of it, I have some issues.

Right now, I have played with the margins a lot (adding negative margin, etc.) to get the different modules in the header (it is one row - three columns, and each column has one module) to line up and show accordingly on mobile and tablet. However, I am running into issues - firstly, how the mobile header renders on android vs. iphone, and then how it renders in portrait vs. landscape.

I have attached a few pictures. First picture is Android Phone - Portrait. Ideally I would like the global header to render like this on all devices. Right now, I think i have 'cheated' with the margins to get the android portrait view hence it's not identical across all devices. The second picture shows how it is rendering unevenly on iphone (spacing between social icons).

Finally third image is showing how it looks in landscape mode. I have no idea how to fix this without disturbing how it looks in portrait.

All help is appreciated. Website URL is untold.ooo