Align sub menu centered under menu item

Hi there!

I’ve made a sub menu similar to how it’s on generatepress.com, and can’t figure out how to align it horizontally underneath the menu item that opens it.

I’ve added class sub-menu-columns to my main menu item, and use the CSS below to style the sub-menu;

<style>
    .site-header .main-navigation .sub-menu {
        border-radius: 10px;
        box-shadow: none;
    }

    /* Styles for sub-menu container */
    .sub-menu {
        width: 500px !important; /* Sets the width of the sub-menu */
        padding: 0; /* Removes default padding */
        margin: 0; /* Removes default margin */
        list-style: none; /* Removes default list styling */
        overflow: hidden; /* Ensures content does not overflow and affects the radius */
    }

    /* Styles for sub-menu with columns */
    .sub-menu-columns ul.sub-menu li {
        display: inline-block; /* Aligns list items horizontally */
        float: left; /* Floats items to the left */
        width: 250px; /* Sets the width of each list item */
        border: 1px solid var(--base); /* Adds 1px red border to menu items */
        border-right: none; /* Removes right border for items on the left */
        border-bottom: none; /* Removes bottom border initially */
        box-sizing: border-box; /* Ensures padding and borders are included in the element's width and height */
        background-color: white; /* Sets background color of menu items */
        border-radius: 0; /* Removes border radius initially */
    }

    /* Add right border back to items on the right (even-numbered) */
    .sub-menu-columns ul.sub-menu li:nth-child(even) {
        border-right: 1px solid var(--base); /* Adds right border to even items */
    }

    /* Add bottom border only to the last two items */
    .sub-menu-columns ul.sub-menu li:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--base); /* Adds bottom border to the last two items */
    }

    /* Border radius for the outermost corners */
    .sub-menu-columns ul.sub-menu li:first-child {
        border-top-left-radius: 5px; /* Top left corner */
    }

    .sub-menu-columns ul.sub-menu li:nth-child(2) {
        border-top-right-radius: 5px; /* Top right corner */
    }

    .sub-menu-columns ul.sub-menu li:nth-last-child(2) {
        border-bottom-left-radius: 5px; /* Bottom left corner */
    }

    .sub-menu-columns ul.sub-menu li:last-child {
        border-bottom-right-radius: 5px; /* Bottom right corner */
    }

    /* Styles for menu item links */
    .sub-menu a {
        font-size: 18px !important; /* Sets the font size of the menu item */
        font-weight: bold; /* Makes the menu item text bold */
        display: block; /* Ensures the entire link area is clickable */
        padding: 25px!important; /* Adds padding for better spacing */
        text-decoration: none; /* Removes underline from links */
        color: black; /* Sets text color */
        transition: background-color 0.3s; /* Smooth transition for background color change */
        border-radius: inherit; /* Inherits border-radius from parent li */
    }

    /* Styles for menu item links on hover */
    .sub-menu a:hover {
        background-color: var(--base); /* Changes background color on hover */
    }

    /* Styles for menu item descriptions */
    .sub-menu .description {
        font-size: 13px !important; /* Sets the font size of the description */
        display: block; /* Ensures the description is on a new line */
        font-weight: normal; /* Keeps the description text regular weight */
        margin-top: 5px; /* Adds vertical space between item name and description */
        color: black; /* Ensures the description text remains black */
    }

    /* Keep description text color black on link hover */
    .sub-menu a:hover .description {
        color: black; /* Maintains black color for description on link hover */
    }
</style>

By default it opens the sub menu on click, and aligns the whole sub menu to the left of the menu item that opens it.

I modified it so it opens centered underneath the main menu item that opens it, but it only centers to the left of the main menu item.

Used this modified code:

<style>
    .site-header .main-navigation {
        position: relative; /* Ensure the parent is positioned */
    }

    .site-header .main-navigation .sub-menu {
        border-radius: 10px;
        box-shadow: none;
        position: absolute; /* Position relative to parent */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Adjust to truly center */
        top: 100%; /* Position below the main menu item */
        z-index: 1000; /* Ensure it appears above other content */
    }

    .sub-menu {
        width: 500px !important; /* Set the width of the sub-menu */
        padding: 0; /* Remove default padding */
        margin: 0; /* Remove default margin */
        list-style: none; /* Remove default list styling */
        overflow: hidden; /* Ensure content does not overflow */
    }

    .sub-menu-columns ul.sub-menu li {
        display: inline-block; /* Align items horizontally */
        float: left; /* Float items to the left */
        width: 250px; /* Set width of each item */
        border: 1px solid var(--base); /* Add border to items */
        border-right: none; /* Remove right border for items on the left */
        border-bottom: none; /* Remove bottom border initially */
        box-sizing: border-box; /* Include padding and borders in the element's width and height */
        background-color: white; /* Set background color */
        border-radius: 0; /* Remove border radius initially */
    }

    .sub-menu-columns ul.sub-menu li:nth-child(even) {
        border-right: 1px solid var(--base); /* Add right border to even items */
    }

    .sub-menu-columns ul.sub-menu li:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--base); /* Add bottom border to the last two items */
    }

    .sub-menu-columns ul.sub-menu li:first-child {
        border-top-left-radius: 5px; /* Top left corner */
    }

    .sub-menu-columns ul.sub-menu li:nth-child(2) {
        border-top-right-radius: 5px; /* Top right corner */
    }

    .sub-menu-columns ul.sub-menu li:nth-last-child(2) {
        border-bottom-left-radius: 5px; /* Bottom left corner */
    }

    .sub-menu-columns ul.sub-menu li:last-child {
        border-bottom-right-radius: 5px; /* Bottom right corner */
    }

    .sub-menu a {
        font-size: 18px !important; /* Set font size */
        font-weight: bold; /* Make text bold */
        display: block; /* Ensure the entire link area is clickable */
        padding: 25px!important; /* Add padding for spacing */
        text-decoration: none; /* Remove underline */
        color: black; /* Set text color */
        transition: background-color 0.3s; /* Smooth background color transition */
        border-radius: inherit; /* Inherit border-radius from parent li */
    }

    .sub-menu a:hover {
        background-color: var(--base); /* Change background color on hover */
    }

    .sub-menu .description {
        font-size: 13px !important; /* Set font size for description */
        display: block; /* Display description on a new line */
        font-weight: normal; /* Normal font weight for description */
        margin-top: 5px; /* Space between item name and description */
        color: black; /* Ensure description text remains black */
    }

    .sub-menu a:hover .description {
        color: black; /* Maintain black color for description on hover */
    }
</style>

I want it centered underneath the main menu item. How can I achieve that?

I can probably just add some margin or padding to get it in the right place, but would like it to be dynamic so it works for different main menu items.

I also tried this solution, but that only aligned the sub menu slightly but not centered completely.

Basically, I miss an option in customizer to change dropdown direction to middle instead of left or right.