Responsive Header

Hallo zusammen, ;)
ich bin seit ein paar Monaten dabei meine erste Website zu bauen und auch wenn die Arbeit nie zu ende geht sind momentan nur wenige Dinge übrig die noch gelöst werden müssen.

Das größte Hindernis ist seit langem der Mobile Header,
ich möchte erstens das mein Menü einfach nur verkleinert wird auf die maximale breite und die Menüpunkte nebeneinander stehen statt untereinander und das zweite Problem ist das der Header Container mindestens um die Hälfte zu schmall ist.

Normalerweise google ich mir meine Lösungen zusammen aber ich komme hier auf keinen Grünen Zweig wie man so schön sagt.
Ich habe es mit

Zitat

Media only screen and (max-width: 30em)

mit verschiedenen größen min und max versucht und ich habe versucht es unterschiedlich anzusteuern

Zitat

.nav-header
.nav.header-nav.header-bottom-nav.nav-center.nav-size-xlarge.nav-spacing-xlarge.nav-uppercase
.nav-top-link
#header

aber es triggert einfach nichts und bleibt unverändert, hoffe ihr könnt mir da weiterhelfen.
Meine Theme ist übrigens Flatsome

http://www.get-your-keyboard.com/

Ich habe ein LG G6 und nutze chrome, habe gerade testweise Firefox installiert und da ist das Problem auch nicht, möglicherweise liegt es an meinem Cache?
und abgesehen vom geteilten Header wie könnte ich denn die Menüpunkte responsiv machen so das alle 4 proportional nebeneinander sind.

Hab die Size jetzt noch auf 4 geändert aber abgesehen davon, perfekt vielen vielen dank.

ärgerlich...
bei mir hat es perfekt gepasst, hab jetzt auf 3.5 reduziert.
Würde es da nicht eine "intelligentere" lösung geben die sich dem screen anpasst?
Media-Query hab ich momentan

Zitat

max-width: 30em

(falls das relevant wäre)

Naja in einer rein theoretischen Situation würde es schon gehen wenn man alle abstände untereinander proportional und prozentuell beibehält.