Hallo Julian,

das <br> kannst Du vermeiden, indem Du die <a> in eine ul-Liste einrahmst. Aus Sicht der Zugänglichkeit ist das ohnehin eine gute Idee ("Navigation, Liste mit 4 Einträgen, Eintrag 1: Link: Startseite..." und so weiter).

Die Listenpunkte, die Dir das ul beschert, kannst Du mit list-style:none vermeiden, und du musst dem ul-Element das Padding wegnehmen.

Die Anordnung nebeneinander bekommst Du hin, wenn Du dem ul bei genügend breiten Schirm (@media-Abfrage) bzw. bei genügend breitem details-Element (@container Abfrage) ein display: flex gibst.

Reichen diese Hinweise oder brauchst Du mehr How-To Infos?

Rolf