Align Logo Differently for Mobile

Hi,

My website is https://iwannatravel.com.sg.

I wish to align the logo on the top on non-mobile devices to the left.

This I managed to do so by changing from

#branding img.logo-image { width: 500px; max-width: 100%;}

to

#branding img.logo-image { width: 500px; max-width: 100%; margin-left: -76px;}

But if I do that, the logo would appear cropped off on my mobile.

I tried adding:

@media only screen and (max-width: 767px) {
#branding img.logo-image { width: 500px; max-width: 100%; margin-left: -76px;}
}

But it doesn’t work.

Anybody can help?

Thanks!