Trying to center navigation bar with CSS - html

Question

Hello all I'm fairly new to CSS and learning a lot everday, but I'm having some issues centering my "megamenu" navigation bar. I've searched all over and so far none of the things I've tried seem to work with this, it's still mostly left aligned. I've got it set up right now here: https://www.shrinkabulls.com/megamenu/test.html
The code is below. Any help would be greatly appreciated. Thank you!
HTML:
<!-- ...:::: Start Header Section:::... -->
<header class="header-section d-lg-block d-none">
<!-- Start Bottom Area -->
<div class="header-bottom sticky-header">
<div class="container">
<!-- Header Main Menu -->
<div class="main-menu">
<nav>
<ul>
<li>
Home
</li>
<li class="has-dropdown">
Available Bulldogs <i class="fa fa-angle-down"></i>
<!-- Sub Menu -->
<ul class="sub-menu">
<li>Puppies</li>
<li>Adults</li>
<li>French Bulldogs</li>
<li>Stud Service</li>
<li>Past Puppies</li>
</ul>
</li>
<li class="has-dropdown has-megaitem">
Bulldog Info <i class="fa fa-angle-down"></i>
<!-- Mega Menu -->
<div class="mega-menu">
<ul class="mega-menu-inner">
<!-- Mega Menu Sub Link -->
<li class="mega-menu-item">
<a class="mega-menu-item-title">General</a>
<ul class="mega-menu-sub">
<li>Is a bulldog right for you?</li>
<li>Buying a Bulldog Puppy</li>
<li>Naming Your Bulldog</li>
<li>Pricing/Home Approval</li>
<li>Bulldogs and Children</li>
<li>Bulldogs and Cats</li>
<li>Breeding</li>
<li>Showing</li>
<li>Bulldog Merchandise</li>
<li>SCAM Alert</li>
</ul>
</li>
<!-- Mega Menu Sub Link -->
<li class="mega-menu-item">
<a class="mega-menu-item-title">Care</a>
<ul class="mega-menu-sub">
<li>Health/Vet</li>
<li>Nutrition</li>
<li>Supplements</li>
<li>Teeth Cleaning</li>
<li>Spay/Neuter</li>
<li>Heat Stroke</li>
<li>Overweight Bulldogs</li>
<li>Newborn Bulldogs</li>
<li>Pet Insurance</li>
<li>Clothes for Bulldogs</li>
</ul>
<!-- Mega Menu Sub Link -->
<li class="mega-menu-item">
<a class="mega-menu-item-title">Breed</a>
<ul class="mega-menu-sub">
<li>History</li>
<li>Standard</li>
<li>Colors</li>
<li>Rare Colors</li>
<li>AKC Color Chart</li>
</ul>
</li>
<!-- Mega Menu Sub Link -->
<li class="mega-menu-item">
<a class="mega-menu-item-title">Training</a>
<ul class="mega-menu-sub">
<li>Crate Training</li>
<li>House Training</li>
<li>Training With Treats</li>
<li>Obedience Training</li>
</ul>
</li>
<!-- Mega Menu Sub Link -->
<li class="mega-menu-item">
<a class="mega-menu-item-title">Links</a>
<ul class="mega-menu-sub">
<li>Links</li>
<li>Sitemap</li>
</ul>
</li>
</li>
</ul>
</div>
</li>
<li class="has-dropdown">
Media <i class="fa fa-angle-down"></i>
<!-- Sub Menu -->
<ul class="sub-menu">
<li>Celebrities With Bulldogs</li>
<li>In The Press</li>
<li>Bulldog Actors</li>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li class="has-dropdown has-megaitem">
Our Dogs <i class="fa fa-angle-down"></i>
<!-- Mega Menu -->
<div class="mega-menu">
<ul class="mega-menu-inner">
<!-- Mega Menu Sub Link -->
<li class="mega-menu-item">
<ul class="mega-menu-sub">
<li>Int Ch Ace</li>
<li>Blue Legacy</li>
<li>Home Brew/JAX</li>
<li>Blue Moon</li>
<li>Ace Jr</li>
<li>Prince</li>
</ul>
</li>
<!-- Mega Menu Sub Link -->
<li class="mega-menu-item">
<ul class="mega-menu-sub">
<li>Ivy</li>
<li>Mystic</li>
<li>Titan</li>
<li>Tundra</li>
<li>Katana</li>
<li>Winston</li>
</ul>
</li>
<!-- Mega Menu Sub Link -->
<li class="mega-menu-item">
<ul class="mega-menu-sub">
<li>Blue Legend</li>
<li>The Boys</li>
<li>Spike</li>
<li>Chocolate Reese</li>
<li>Oscar</li>
<li>Blue Tux</li>
</ul>
</li>
<!-- Mega Menu Sub Link -->
<li class="mega-menu-item">
<ul class="mega-menu-sub">
<li>Dreama</li>
<li>Blue Eyed</li>
<li>Standard Color</li>
<li>Lilac Crave</li>
<li>Chocolate Crave</li>
<li>Black Crave</li>
</ul>
</li>
<!-- Mega Menu Sub Link -->
<li class="mega-menu-item">
<ul class="mega-menu-sub">
<li>Blue Crave</li>
<li>Blue Merle</li>
<li>Exotics</li>
</ul>
</li>
</li>
</ul>
</div>
</li>
<li class="has-dropdown">
About Us <i class="fa fa-angle-down"></i>
<!-- Sub Menu -->
<ul class="sub-menu">
<li>About Shrinkabulls</li>
<li>Awards</li><li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
</div> <!-- Header Main Menu Start -->
</div>
</div> <!-- End Bottom Area -->
</header> <!-- ...:::: End Header Section:::... -->
CSS:
.main-menu {
position: relative;
}
.main-menu nav > ul > li {
position: relative;
display: inline-block;
}
.main-menu nav > ul > .has-dropdown {
margin-right: 5px;
}
.main-menu nav > ul > .has-dropdown:last-child {
margin-right: 0;
}
.main-menu nav > ul > .has-megaitem {
position: static;
}
.main-menu nav > ul > li > a {
display: block;
line-height: 24px;
padding: 10px 10px;
font-size: 20px;
text-transform: capitalize;
font-weight: 500;
color: #993b00;
}
.main-menu nav > ul > li > a:hover, .main-menu nav > ul > li > a.active {
background: #993b00;
color: #FFF;
}
.sub-menu > li > a,
.mega-menu-sub > li > a {
font-size: 18px;
display: block;
line-height: 35px;
text-transform: capitalize;
color: #000;
position: relative;
transition: all 0.3s ease 0s;
}
.sub-menu > li > a::after,
.mega-menu-sub > li > a::after {
position: absolute;
content: "";
top: 50%;
left: 0;
transform: translate(0px, -50%);
height: 5px;
width: 5px;
border-radius: 50%;
background: #993b00;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease 0s;
}
.sub-menu > li > a:hover,
.mega-menu-sub > li > a:hover {
color: #993b00;
transform: translateX(10px);
}
.sub-menu > li > a:hover::after,
.mega-menu-sub > li > a:hover::after {
transform: translate(-10px, -50%);
visibility: visible;
opacity: 1;
}
.sub-menu {
position: absolute;
min-width: 230px;
padding: 25px 20px;
background: #ece2a5;
box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.1);
transform: perspective(600px) rotateX(-20deg);
transform-origin: 0 0 0;
left: 0;
right: auto;
opacity: 0;
visibility: hidden;
transition: 0.5s;
z-index: 99;
top: 100%;
text-align: left;
}
.mega-menu {
position: absolute;
min-width: 100%;
padding: 25px 30px 30px 30px;
background: #ece2a5;
box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.1);
transform: perspective(600px) rotateX(-20deg);
transform-origin: 0 0 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
transition: 0.5s;
z-index: 99;
top: 100%;
text-align: left;
}
.mega-menu-inner {
display: flex;
justify-content: space-between;
}
.mega-menu-item-title {
font-size: 20px;
line-height: 24px;
text-transform: uppercase;
font-weight: 700;
display: block;
margin-bottom: 13px;
color: #333;
}
.mega-menu-item-title:hover {
color: #261146;
}
.mega-menu-sub > li {
display: block;
}
.main-menu nav > ul > li:hover .sub-menu,
.main-menu nav > ul > li:hover .mega-menu {
opacity: 1;
visibility: visible;
transform: perspective(600px) rotateX(0deg);
}

Answer 1

It seems to me that the whole menu is not centered... why don't you try to add
.main-menu > nav > ul {
display: flex;
justify-content: center;
}
if this is not what you are looking for, please clarify!
Edit: I'm glad that worked, I corrected the css so the outcome you mention no long happens.
If you are going to keep working with css, maybe try some methodology or convention to name elements to avoid that something like this happens to you in the future BEM for instance is great or you can read something about atomic design.

Answer 2

What exactly are you trying to center? If it is the menu text, just use the
text-align
CSS attribute (https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
for example, in class header-bottom, you would have the following (text-align:center added to bottom):
.header-bottom {
background: #ece2a5;
position: relative;
box-shadow: 0 3.4px 2.7px rgb(0 0 0 / 1%), 0 8.7px 6.9px rgb(0 0 0 / 1%), 0 17.7px 14.2px rgb(0 0 0 / 1%), 0 36.5px 29.2px rgb(0 0 0 / 1%), 0 100px 80px rgb(0 0 0 / 2%);
text-align: center;
}
If it is something else you are trying to center, please explain in more detail, and I will edit this answer accordingly.