Responsives Webdesign: Problem mit white-space:nowrap und max-width:100%; bei Nebeneinanderreihung von 3 Bildern

In einem <div> werden 3 Bilder aus einen Ordner eingelesen.
css des div: white-space:nowrap;max-width:100%;width:998px;

Alle 3 Bilder werden im css mit max-width:100%; height: auto;  versehen. Das erste und das 3 Bild wird jeweils gegen einen kleinen Pfeil ausgetauscht. In der ausgegebenen html-Datei stehen die Breite und die Höhe der Bilder.

Wenn ich den Browser in der Breite zusammenschiebe, werden die beiden äußeren, kleineren Bilder (Pfeile) gar nicht verkleinert und das große Mittlere zu wenig. Das bedeutet, die 3 Bilder ragen über das div hinaus.

Mit meinem Android -Mobiltelefon stelle ich keine Änderungen und Fehler fest.

Hier ist eine Beispielseite: http://www.l-seifert.de/bautzen/Bautzener-Dom.html

Grüße und vielen Dank im Voraus für jede Hilfe