Hi there,
now i remember.
Change this CSS:
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
float: left;
left: 0 !important;
padding: 30px 0;
}
for:
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
float: left;
left: 0 !important;
padding: 30px 0;
display: flex;
justify-content: center;
}
Now we need to set a max width on each of the sub menus.
Change this CSS:
nav .main-nav .mega-menu.mega-menu-col-3 > ul > li {
width: 33.3333%;
}
for:
nav .main-nav .mega-menu.mega-menu-col-3 > ul > li {
width: 33.3333%;
max-width: 380px;
}
The max-width: 380px;
was calculated by dividing the total width of the navigation: 1140px by 3.
You can apply the same logic to any other mega menu column width.