Position des Header-Logos ändern für Mobile Geräte

Hi,

ich habe momentan das Problem,dass mein Logo im Header auf dem iPad und Mobilgeräten zu weit rechts angezeigt wird. Ich würde gerne die Position ändern, sodass das Logo mittig über dem aufklappbaren Navigationssymbol sitzt.

Was die Ansicht auf einem Desktop-Pc angeht, kann ich das Logo des Headers in jeder Hinsicht folgendermaßen anpassen:

.site-logo {
margin-left:50%;
max-height: 35px;
...
...
...
}

Für die Anpassung auf die Mobilgeräte hatte ich bereits die Media Querys ausprobiert. Hat aber bei mir nicht funktioniert.

Hat einer eine Idee wie ich das Problem lösen kann?

Danke, das ist eine Möglichkeit.

Musste jetzt nur die Menüitems des Headers dementsprechend anpassen:)