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
--
sumpsi - posui - obstruxi
sumpsi - posui - obstruxi