Bin jetzt etwas verwirrt! Es liest sich in deiner Beschreibung so, als würdest du entweder/oder einfügen - gedacht ist dieser Code.... oder zumindest Teile davon... als Gesamtes eingefügt zu werden.
Der Teil ohne ' Media' gilt dann für alle Displaygrößen, die kleiner als die nächste eingefügte ' Media' sind - im Beispiel wären das bei dir kleiner 20em.
Wird das Display dann breiter als 20em, wirkt die in dieser Media festgelegte Anweisung. ... und das geht so weiter, bis du eben die größte Breite erreicht hast. Jede dieser ' Media' wirkt immer nur auf einen bestimmten Bereich ... von 0em -20em... von 20em - 30em.... usw. Dafür müssen aber alle im CSS vorhanden sein. Einzeln nutzen die wenig!
Sorry, wenn ich falsch verstanden haben sollte und dir jetzt was erkläre, was du schon weißt.
Aber im Prinzip solltest du in der Lage sein mit dieser 'Sammlung' von Media screen and (min-width: ...em) für jeden Bereich/Displaygröße das Logo pixelgenau zu positionieren! Ohne Balken oben oder unten.
