It looks like you’ve done a few things wrong in your css. From what I can tell you have the #head-wrap set at only 60px, which means this is the way it will show up on mobile phones. You’d need to increase that for mobile phones by adding that code in the responsive section and increasing the height.
You also added “margin-top: -62px;” for the #header .widget-area which is the reason its covering the header/logo area. I’d remove that….or at least adjust it in your responsive section as well.
Also, to center the logo you would need to add this to the #header in your responsive section –
#header {
background-position: center top;
}