marging left da problemi alle immagini sul responsive

[pippomat]

Ragazzi ho realizzato (ancora in locale) un template per wordpress responsive ... ho un piccolo problema che non sto riuscendo a risolvere.... vi spiego:

l'header del template contiene un logo aziendale .... ora con questo codice CSS il logo viene posizionato sulla parte sx ... e non crea nessun problema nella visualizzazione su phone (vedo il logo centrale).

.header {
    display: block;
    background-image: url(../images/header-texture-1.jpg);
    background-position: center top;
    background-repeat: repeat;
    background-size: auto;
    min-height: 153px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}


.header .logo-image {
    display: block;
    position: relative;
    margin-top: 5%;
}


.header .logo-header {
    display: block;
    float: left;
    height: 153px;
}

Se volessi mettere il logo centralmente ho messo il padding-left: 300px; ... e vedo il logo centralmente su desktop ma quando visualizzo il sito con phone naturalmente l'immagine del logo viene ridimensionata troppo diventa troppo piccola...

.header .logo-header {
    display: block;
    padding-left: 300px;
    height: 153px;
}

Come posso risolvere?? ... spero di essere stato chiaro. ....

ecco due immagini che vi fanno capire la situazione:

versione desktop:

Schermata 01-2456677 alle 12.45.02.jpg

versione responsive:

Schermata 01-2456677 alle 12.44.53.jpg