Mobile layout problems

Hi
There are some problems with the layout on my mobile phone I’d appreciate some help with:
1. The logo appears stretched vertically
2. The menu tabs are stacked up in a small box in the middle of the screen
3. There is a lot of space vertically between what are the rows in PageBuilder.
I’ve tried using WPtouch plugin but it looses a lot of the customisation of my desktop version so would prefer to sort out the above problems and use only the desktop version.
I’ve pasted below the Custom CSS I have added to get the Desktop version looking as I want it, in case any of this is responsible for any of the problems.
Many thanks
Ross
#masthead .hgroup .logo img {
width:870.30px!important;
height:173.07px!important;
margin-left: 12.3%;
margin-top: -2%;
}
nav.site-navigation.main-navigation.primary{
margin-left: 16.5%;
margin-right: 16.5%;
}
/* Menu Padding Horizontal */
.main-navigation ul li a {
padding-right: 30.90px !important;
padding-left: 30.9px !important;
}
#main {
padding-top: 4px !important;
padding-bottom: 6px !important;
}

URL: http://rossgardens.co.uk/