Das mit der maximalen Breite von 80 % scheint hier nicht so gut zu funktionieren.
Edit: Ich musste den Bildern einfach wieder max-width:100% zuweisen. Das hatte ich unbedacht entfernt.
Jetzt sind die Probleme, vor denen ich bei der Webseite stand, vorerst gelöst.
Vielen Dank!
Das ist natürlich nicht schlecht. Ich war nur erst mal baff.
Allerdings sieht Dein Quelltext im Ergebnis nicht mal ansatzweise so aus, wie meiner. Mittig ist das Bild auch nicht. 
Da muss also einiges geändert und geschafft werden.
Aah, das ist so ein riesiger Quelltext. Da muss ich doch erst meine Einzelteile raus suchen, die ich brauche.
Edit: Eigentlich wollte ich all solche Dinge selbst raus finden und nicht meine komplette Seite neu aufgesetzt bekommen. 
Nein, nicht die Abstände, sondern das a-Element.
Die Abstände vom a-Element sind anklickbar.
Verwende HTML5 und füge das Bild in einen geeigneten Container ein, also einem figure-Element.
Von einem figure-Element habe ich noch nie gehört. Meinst Du damit div, span, p etc.?
Bei CSS solltest du zudem darauf achten keine unsinnigen Angaben zu machen und nur CSS-Eigenschaften verwenden, deren Auswirkungen du auch kennst.
Darum kümmere ich mich immer, sobald ich eine Sache fertig habe. Während ich noch experimentiere, kommt es natürlich auch mal zu unnötigen CSS-Eigenschaften.
Du gibt dem ul-Element zum Beispiel eine Höhe von 32px, den darin enthaltenen li-Elementen aber eine Höhe von 52px.
Um das Menü oben geht es mit in diesem Thread eigentlich nicht. Dennoch vielen Dank für den Hinweis.
Zum Layouten ist Flexbox zudem geeigneter als float.
Davon habe ich auch noch nie etwas gehört. Ein paar weitere Hinweise wären freundlich.
Was verstehst du unter anderen Funktionalitäten?
Beispielsweise soll das Bild mittig auf der Seite angezeigt werden. Das geht mit a-, div-, span-, ul- und li-Elementen nicht.
Die Abstände sind dort anklickbar.
Wie kann ich es hier erreichen, dass die Abstände links und rechts nicht anklickbar sind, ohne andere Funktionalitäten zu verlieren?
