Large Gap at top of mobile site

Hi there,

I am currently building a homepage and have run into a problem.

I have made the phone number at the top of the page larger and with a blue background using this quick css.

.phone-info span{
color: #ffffff;
font-size: 16px;
font-family: raleway;
padding: 8px;
font-weight: 600;
}

.header_color .container_wrap_meta { background-color: #173763; }

This then made the slider overlap on a page which had the page title and breadcrumb bar, so I used this code to move it down a bit:

/***************************
****************************
Removes overlap on header and menu area
****************************
***************************/

.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 224px !important;
} 

I think that this is creating the large white space at the top when the page is scaled down to mobile size.

Is there anything I can do to stop this happening? I don’t know CSS, I just use and repurpose the quick css you guys give us on here!

Thanks in advance