Scaling down Logo for mobile

I’m using a logo on my website. Unfortunately the logo is too big for a small mobile screen and I want it to be scaled down and adapted automatically.

I added this to the style.css

#site-logo {display: block; height: auto; max-width: 100%;}

The logo’s size still remains unchanged.
Any ideas?