Probleme mit Einfügen einer neuen Ebene und die Darstellung

Auch bei größeren Bildschirmgrößen wird der Bereich verschoben. Das liegt daran, dass dieser absolut zum Browser-Fenster positioniert ist:

#werbung-kopf {
    position: absolute;
    top: 19px;
    left: 560px;
}

Genau passen tut das wohl nur bei einer Bildschirmbreite von etwa 1100px - zum Testen einfach mal das Browser-Fenster zusammenschieben. Der Abstand zum linken Fensterrand ändert sich ja je nach Fensterbreite, und da passt die Angabe "left: 560px" eben nur bei einer bestimmten Breite.

Besser wäre es hier, wenn der Bereich am übergeordneten Element, also dem Header ausgerichtet wird. Das erreicht man dadurch, dass der Header relativ positioniert wird:

#main > header {
position: relative;
}

Für #werbung-kopf müssen dann noch die Angaben für top und left entsprechend angepasst werden.

Auf dem Desktop wird alles richtig angezeigt bei kleinen Bildschirmgrößen wie kleiner 480 Pixel aber nicht.

Das liegt wohl noch an etwas anderem. Der Header hat eine feste Breite von 840px:

 #main > header {
    height: 139px;
    width: 840px;
}

Unterhalb von 640px wird nur die Höhe überschrieben:

@media (max-width: 640px){
    /* ... */
    #main > header {
        height: auto;
    }
    /* ... */
}

Da fehlt vermutlich noch eine Breitenangabe?