Adjusting header height

Hi,

With info found across the forum, I am able to adjust my height and margin between title, tagline and menu using the css code here.
.site-logo {margin-bottom: -45px !important;}
.nav {margin-left: 200px !important; float: right;}
.site-title{margin-bottom:0;margin-top:0;}
.site-description{margin-top:0;}
the above works in desktop view as per my attached file 1
but in mobile view, the title cannot be seen as it moved down and is covered by the map as per my attached file 2.

Hope you can advise how i can adjust it in mobile view so that the title is back to the top middle of the header

Thanks!