Header verschoben bei mobiler Ansicht

Hallo,

 

ich verzweifel derzeit leider ein wenig. 
Bin dabei den Header ein wenig anzupassen, auf nem Bildschirm passt alles, sobald ich mir dann die mobile Ansicht anschaue, weiß ich nicht mehr weiter… 

 

Das ganze sieht dann so aus: 

Habe schon debugged und geschaut ob ich die Ausrichtung nach rechts bekomme, doch… die ist bereits rechts…

 

Als Grundlage diente das Flat Responsive Design, welche ich nun angepasst habe.

header.less (Die letzten 3 Einträge kann man zudem auch sicherlich schöner verarbeiten?)

/*merkzettel ausblenden
li.navigation--entry.entry--notepad,
nav.product--actions a.action--link.link--notepad {display:none;}
*/
.header-main {
    background-color: #e0e0e0;
}

.results--list {
    .box-shadow(none);
}

@media screen and (min-width: @phoneLandscapeViewportWidth) {
  .results--list{
    .border-radius(0);
  }
}
.header-main
.icon--text2 {
  .unitize(font-size, 25);
  vertical-align: middle;
}
.header-main {
  // Logo
  .logo-main {
    // Smaller logo for mobile viewports
    .logo--shop {
      .unitize-height(35, 16);
      width: 50%;
    }

    .logo--link {
      .unitize-height(35, 16);
    }
  }
}

.header-main {
    .logo-main {
      width: 30%;

      .logo--shop {
        .unitize-height(90, 16);
        .unitize-width(300);
        img {
          width: 100%;
          height: auto;
        }
      }
      .logo--link {
        .unitize-height(90, 16);
        .unitize-width(300);
      }
    }

    .shop--navigation{
      width: 70%;
    }
  }

.navigation--list
.entry--account
.account--link {
  background-color: #e0e0e0;
}

.navigation--list
.entry--card
.cart--link {
  background-color: #e0e0e0;
}
.shop--navigation
.navigation--entry
.btn {
  background-color: #e0e0e0;
}

 

Plugin „Erweitertes Menü“ wird noch verwendet, da habe ich aber lediglich die Farben angepasst.

Danke für die Hilfe.

MfG

EDIT: Es liegt definitv an der header.less. Hab die vom responsive Design probiert und da sieht es normal aus.