Menüeintrag gleich breit mit Hintergrund

Hallo,
ich möchte die Einträge meines Hauptmenüs mit einem Kasten mit fester Hintergrundfarbe (#ac2b21) und gleicher Breite/Höhe für alle angezeigten Elemente versehen. Zwischen den Einträgen soll ein kleiner Abstand (3pt) sein (damit die Einträge quasi als Buttons erscheinen). Betrifft Template Fire und die folgende Seite: www.j4.kjf-mabi.de

Hintergrund des Wunsches ist, dass ich das Template so nah wie möglich an unsere (Verbands-) Homepage angleichen möchte ( www.kreismelder.de ), da wir eine Untergruppe dieses Verbandes sind.

Über die Einstellungsmöglichkeiten im Template habe ich keine Funktion gefunden, um die Menüeinträge in die gewünschten gleich breiten Kästen zu setzen.
Kann jemand Helfen?

Gruß Heiko (joomla 3.10.4, Template Fire)

Hallo, das geht ausschoießlich mit css.
Fügen sie mal folgenden css code in ihre custom.css ein

.astroid-nav .nav-link{
color:#fff;
background: #f00;
margin-right: 3pt;
}

Hallo,
zunächst Herzlichen Dank für den Code. Das hat mir etwas geholfen.
Ich habe damit gearbeitet und durch Anpassungen ein Teil meines Ziels erreicht.
Was ich aber auch gemacht habe, die Verteilung der sechs Menüpunkte auf eine identische Breite und das annähernde Ausfüllen dieser Navigations-Elemente auf die Containerbreite von 1200px habe ich nicht hinbekommen. Rumprobiert habe ich z. B. mit:
max-width: 1200px;
display: flex;
flex-direction: row;
flex: 1 1 auto;
list-style: none;
justify-content: center;

Was mache ich falsch? Wo muss noch angepasst werden, damit die Schaltflächen alle gleich breit sind und die Containerbreite gleichmäßig in Abhängigkeit von der Anzeigebreite ausfüllen?
LG Heiko

aktueller custom.css:
.astroid-nav .nav-link{
background: #ac2b21;
margin-right: 3px;
padding-top: 9px;
padding-bottom: 9px;
}
.astroid-nav .nav-item{
background: none;
max-width: 1200px;
justify-content: stretch;
margin: 0px;
padding: 0px;
}
.astroid-nav .nav-item .active{
background: #ac2b21;
}