Wie zentriere ich ein Banner in einer Navigationsleiste? ⇐ CSS

[Anonymous]

Ich bemerke ein Problem mit der Navigationsleiste oben auf der Webseite. Egal, was ich versuchte oder versuchte, das Logo (befindet sich in der Div-Klasse „Banner“) war nicht zentriert.
So sieht die Navigationsleiste auf meinem Laptop-Bildschirm aus:


Jetzt sieht die Navigationsleiste erweitert aus screen


Meiner Meinung nach wäre die Navigationsleiste in drei Teile geteilt. Der erste Teil befindet sich auf der linken Seite und enthält Links zu verschiedenen Seiten der Website zur Erweiterung. Der zweite Teil würde das Logo für das kleine Unternehmen meines Familienmitglieds enthalten. Der dritte Teil hätte Seitenlinks, die direkt zu Abschnitten auf der Seite selbst führen würden. (Wenn alles außer „Book a Consult“ in Zweierreihen angeordnet sein könnte, um Platz zu sparen, wäre das kein Problem.)
Mein größtes Problem ist, dass ich möchte, dass das Logo in der Navigationsleiste unabhängig vom Zoom immer zentriert ist. (Ja, ich habe das Offensichtliche versucht, einschließlich margin:auto, justify-content: center und align-items: center.)
Hier ist der HTML- und CSS-Code für alles, was wichtig ist, hauptsächlich die Navigationsleiste selbst und die Divs für die Banner und Boxen als Referenz:

Code: Select all

.nav {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(10px);
background: rgba(238, 3, 3, 0.85);
border-bottom: 1px solid var(--line);
}

.wrap {
margin: 0 auto;
padding: 0 20px
}

.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
gap: 14px
}

.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
letter-spacing: .2px;
font-size: 22px;
}

.banner {
left: 50%;
font-family: Arial, Helvetica, sans-serif;
color: rgb(173, 20, 20);
display: flex;
align-items: center;
justify-content: center
}

div.box {
background: #000000;
border: 2px solid rgb(255, 255, 255);
border-radius: 10px;
text-align: center;
align-items: center;
justify-content: center;
width: 750px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

div.box h1 {
font-size: 72px;
font-family: 'Sacramento';
color: rgb(255, 0, 0);
padding: 2%;
margin: 0px 30px 0px 30px;
}

div.box p {
font-size: 36px;
font-family: 'Sacramento';
color: rgb(255, 255, 255);
margin: 0px 2% 0px 2%;
}

.links {
display: flex;
gap: 18px;
align-items: center;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}

Code: Select all

[url=#top]

HomePage






JC Color & Design
Color Decisions Made Easy - Inside and Out.



[url=#process]Process[/url]
[url=#faq]FAQs[/url]
[url=#portfolio]Portfolio[/url]
[url=#reviews]Reviews[/url]

[url=#contact]Book a Consult[/url]

Ich verwende kein JavaScript oder Bootstrap-Elemente.