Logo Replacement for Mobile

I posted the following question many days ago and have yet to get any assistance. I am okay with paying for support if I just missed something and you don’t offer free support, but what what I saw on WordPress/your site led me to believe you do offer free support. I *really* would appreciate some guidance here 🙂

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

Thank you,
Bree