Fehlerhafte Darstellungen im Edge

[einsiedler]

Hallo liebe Forumer,

Bei meinem Projekt habe ich mehrere Probleme und zwar (eigentlich) NUR im Edge

Link zur fehlerhaften Seite : Link zur Seite

A) Fehlerhafte Darstellung im <header> </header>

Im Firefox Quantum (63.0.3) , Opera Version:56.0.3051.116 & Chrome Version 70.0.3538.110 scheint alles wunderbar zu laufen, es kann aber sein das auch dort der Code oder das CSS nicht richtig ist. Jedenfalls bricht der Text der <h>`s bzw. zusammen mit dem Logo, nicht um (wird getrennt), wie in den übrigen Browsern, wenn man das Browserfenster zusammenschiebt. Siehe screen: Screen zu A)
Villeicht ist der html-Aufbau wie ich es gemacht habe schon nicht richtig. Was läuft da falsch?

B) Wenn sich ein Text im <main> befindet, läuft alles reibungslos, er wurde einfach umgebrochen wenn das Bildschirmfenster schmaler wurde.

Doch nun bei einem IMG sieht es anders aus.

Im Opera, firefox und chrome wird das Img beim zusammenschieben des Bildschirmfensters schmaler, es verkleinert sich. So soll es sein.

Doch nur im IE macht er dieses "Verhalten" nicht.

Wie im screen Screen zu B) wird das Foto nicht "verkleinert", irgendwann wird es einfach rechts ausgeblendet wegen overflow: hidden; Was läuft da falsch? Ist da der Aufbau nicht richtig?

Überlegungen zu B) ODER findet ihr es besser wenn das IMG sich rechts "hinausschiebt". Ich werde diesen Aufbau auch in einer Fotogalerie benutzen, in der sich mehrere IMG untereinander befinden werden. Wenn ich überlege das die Bilder sich "verschmalern" immer wenn das Menü sich vergrößert. Sieht das überhaupt aus oder würdet ihr es so machen (oder lieber die Bilder rechts aus dem Rahmen "verschwinden" und hinausschieben lassen.

C) Ich verstehe folgende Fehlermeldungen des Validators NICHT und wie kann man es beheben? Validator-Meldung

Vielen dank für eure Mithilfe.

Der einsiedelnde