How to make search box in header to behave in responsive way

Hello,

I’m using a free wordpress theme Unite for this website. Search box was by default in the sidebar, but I wanted it to be in the header. So I moved it to the header, but it doesn’t act nicely when resizing the browser, it is not looking good on tablet and phone version.

This is how it looks on tablet:
https://shrani.si/f/30/MG/uiTv4rK/tablet-screenshot-uganda.png

And this is how it looks on phone:
https://shrani.si/f/2/Ps/wlFQ8m2/phone-screenshot-uganda.png

The space between the logo and the search box is caused by the top-margin I applied to the search box to vertical align it in the header in desktop view. But that destroys the look in smaller sizes of screens..

I would be really happy if you could help me fixing this to a look like this (centering the searchbox horizontally and getting rid of that space between the logo and search box):

https://shrani.si/f/D/vJ/2YaNLxIO/tablet-screenshot-uganda.jpg
or
https://shrani.si/f/2d/J0/375Cbo7M/tablet-screenshot-uganda.jpg

I made an example in photoshop for tablet view. Whatever way it is best possible i would be really happy. And the same way it would act for phone as well..

Your help would be really appreciated.

Thank you in advance,

all the best,
Tadej