I'm noticing a problem with the navbar at the top of the web page. No matter what I attempted or tried, the logo (located in div class "banner") would not be centered.
How the navbar looks on my laptop screen:
Now the navbar looks on an extended screen
In my mind, the navbar would be split into three parts. The first part would be to the left and have links to different pages for the website for expansion. Second part would hold the logo for my family member's small business. Third part would have page links that would lead straight to sections on the page itself. (If all except for the "Book a Consult" could be in rows of two to save space I'd be fine with it.)
My biggest issue is that I want the logo in the navbar to be centered all the time regardless of the zoom. (Yes, I have tried the obvious, including margin:auto, justify-content: center, and align-items: center.)
Here is the HTML and CSS for everything that matters, mostly the navbar itself and the divs for the banners and boxes for reference:
.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);
}
<header class="nav">
<div class="wrap">
<div class="nav-inner">
<a class="brand" href="#top" aria-label="JC Color & Design">
<span class="logo" aria-hidden="true"></span>
<span>HomePage</span>
<nav class="pagelinks" id="navLinks" aria-label="Primary navigation">
<!--<a href="old/index.html">Old</a>
<a href="Reviews/index.html">Portfolios</a> FOR NEW WEBPAGES IF DESIRED-->
</nav>
</a>
<div class="banner">
<div class="box">
<h1>JC Color & Design</h1>
<p>Color Decisions Made Easy - Inside and Out.</p>
</div>
</div>
<nav class="links" id="navLinks" aria-label="Primary navigation">
<a href="#process">Process</a>
<a href="#faq">FAQs</a>
<a href="#portfolio">Portfolio</a>
<a href="#reviews">Reviews</a>
</nav>
<a class="cta" href="#contact">Book a Consult</a>
</div>
</div>
</header>
I am not using any JavaScript or Bootstrap elements.
