Minimizing whitespace between custom header and page body

I have a custom div, this div is
<div id="custom-inner-header">
Last night I faced a problem where there was a break in between the custom header and the page body. I had to remove the height attribute and add the overflow attribute to the css code to make it uniform across all browsers. The height attribute also hid the breadcrumbs on some mobile devices.

The problem is now that there is no height value specified, there is a lot of whitespace that is between the page title/body and the custom header.
Instead of changing the height, I think a better alternative would be to move the rest of the page up. So the custom header is not effected.

Also just to note, there is not to much whitespace on the desktop view, look at it on a mobile device and there is a little more whitespace than one really would like to have.

Can this be done? Support access is enabled.