CSS Header Layers Overlap

I'm making the ALT template more responsive and running into just one bugger of a problem (image below).

As the size of the screen decreases, I find that the search box and service menu overlap the logo.

How do I modify the CSS so that this doesn't happen? If the search box/service menu can, instead, appear above or below the logo, that would be ideal.

Thanks for your suggestions.

If anyone is using the old MOD "Make Any Template Responsive" by DolphinTemplate, add this to your _header.html file:

<meta name=viewport content="width=device-width, initial-scale=1">

Makes a huge difference and improvement on mobile/tablet devices.

Only hiccup is above. Not sure how to modify the Boonex CSS files to prevent overlapping in the header.