Navi genau auf Länge anpassen, nur wie?

Ich bin mal wieder am üben, seufz

www.flick-kafi-horgen.ch

Dort möchte ich, dass die Menupunkte schön auf der Linie verteilt sind. Das schaffe ich, wenn ich im CSS

original:

#topmenu ul.menu li a,
#topmenu ul.menu li span.separator {
min-height: 24px;
padding: 10px 15px;
}

auf padding: 10px 16px; abändere.

Soweit so gut. Nur, wenn ich dann z.B. auf den Punkt "so funktionierts" gehe, rutscht mir das Intern auf eine neue Zeile. Wie kann ich das anpassen, dass das nicht passiert? Müsste irgendwas sein, dass beim anklicken eben der Text nicht mehr Platz braucht. Weiss nur nicht, wo ich das finde.

Mit padding gehts nicht weil der Text des aktiven Menüs fett wird und deshalb mehr Platz braucht.
Du möchstest eigentlich das ganze Menü zentrieren, aber das geht meines Wissens schlicht nicht.

Danke dir Thomas für die rasche Antwort.

Dann muss ich nicht mehr suchen. Nur überlegen, ob ich das mit den roten Linien lassen soll oder nicht

Versuch mal sowas:

#topmenu ul.menu > li:last-child a, #topmenu ul.menu > li:last-child span.separator {
border-right: 0;
}

Damit wär einfach der rechte Rahmen des letzten Menüpunktes weg.

Hab den Code mal im custom.less eingegeben. Verändert aber rein gar nichts.

Auch den Stil neu gespeichert danach? Sonst wird die CSS Datei ja nicht neu berechnet.