Logo for Mobile

Hello awesome theme magicians!
Have spent the whole day playing with Parabola and I think I’m in love. Have hit a small speed bump though. I added the following code to specify a mobile-friendly logo but it’s getting cut off (height, not width).

@media screen and (max-width: 640px) {
#logo img {
display: none;
}

#logo {
background-image: url(‘http://mercurialway.com/wp-content/uploads/2014/01/mercurial-logo-150px-gray.png’);
background-repeat: no-repeat;
background-position: left;
float: left;
margin: 0 0 0 0px;
width: 100%;
height: auto;
}}

I’m assuming this has something to do with the container but I messed with #header-container as well and that didn’t fix it. Do you know how I could fix this?

My site is currently in maintenance mode but I’ve uploaded a screenshot on google drive: https://drive.google.com/file/d/0B2mBlvyWEs_2M0pKQWh2ZzZjM1E/edit?usp=sharing

Thanks so much!
Bree