Div's bei kleinen Displays haben unterschiedliche Größen

Das Problem hat man relativ häufig. Normaler Weise liegt es daran, dass ein Element mehr Platz einnimmt als in das Browserfenster passt. Der Seiteninspektor zeigt das zwar an aber bei komplexeren Seiten kann das Lokalisieren zeitaufwändig sein, weil man alle Elemente prüfen muss, nicht nur auf der Ebene direkt unter body sondern auch darunter. Ich habe es jetzt so gemacht, dass ich zunächst die erste Ebene geprüft habe, ob der Effekt verschwindet, wenn ich dem Container ein "overflow: hidden;" verpasse. Auf diese Weise habe ich schnell heraus gefunden, dass der Schuldige im div.banner liegt. Jetzt lösche ich das "overflow: hidden;" wieder und prüfe die Elemente darin, dann sehe ich schnell, dass die beiden h-Elemente rechts heraus ragen:

grafik.png

An dieser Stelle offenbaren sich die Nachteile der absoluten Positionierung, Du müsstest die Breite dieser Elemente korrigieren.

Die Lösung liefert dann wieder das bewährte Flexlayout: Die Element untereinander anordnen und zentrieren:

.banner {
  background-image: url("../images/banner.png");
  background-color: #efefef;
  background-repeat: repeat-x;
  height: 400px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2em;
}

Und die absolute Positionierung entfernen.

Den Abstand links erreicht Du durch das padding-left.

Auch auf die feste Höhe (die hat auch Nachteile) kannst Du verzichten, wenn Du dem div.banner auch oben und unten ein padding gibst.