mobile menu toggle goes over logo, can't make logo smaller

Hi,
I have the problem that on the mobile phone size the menu toggle box covers part of the logo.
I’ve tried making the logo smaller on the phone size by adding the following css:

.responsive.logo img {
max-width:80%; !important;
}

@media only screen and (max-width: 767px) {
.responsive .mobile_slide_out .logo img {
margin: 0;
width: 60% !important;
}
.responsive .logo img {
margin: 0 auto;
max-width: 268px !important;
}
}

This is all not working, any ideas?
Thank you,
Lisa