This isn't a perfect fix because the title becomes hidden on ipads and phones - maybe there is a 'float top' feature we can try??
For the header and site title height adjustments you described, try this instead of what you currently have:
padding: 4% 0;
padding: .8em 1.7em;
margin: .4em auto;
Be careful to either remove all the custom CSS you currently have that's related to the same height adjustments or just remove all of your custom CSS, add the example and test it, then add back any other CSS you need that's separate and re-test to make sure none of the other rules you were adding interfere with the heights in the example.
If you examine the theme's existing CSS, you'll see that some heights of things are fluid and not set to a specific pixel amount (i.e. the site-branding padding and margins on the :before pseudo element for site-description). It's often better to follow the theme's way of doing spacing and also use the same units of measure like em or % and that's what I've done in the example above. To test this out, try adjusting the 4% top and bottom padding on site-header-image to something smaller like 1% and take a look at how that changes the header.