Creating columns in WordPress sub menu

I’ve created a sub menu with two columns in WordPress but it’s far from perfect yet. You can see it here – it’s under Blog >> Mountains.

It currently looks like this.

I want it to look something like this.

Code I’ve used so far:

/* Sub menu columns */

.sub-menu-columns ul.sub-menu.dropdown li {
    display: grid; 
  grid-template-columns: 175px 175px;
    width: 50%;
} 

.sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: left;
}

.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
    line-height: 45px;
    width: max-content;
}

Issues I’m having:

1. Longer names do not fit in the box
2. On mobile only part of the names in the right-hand column is visible

Questions I’m trying to get answered:

1. How do I get two neat sub-menu columns that fit in their box and are neatly spaced out?
2. How do I tidy this up on mobile? Probably with a media query, but what should I put in it?

Solutions I’ve tried and do not work for me, or at least not 100%:

• Split wordpress sub-menu into two columns
• https://www.phpcluster.com/how-to-split-wordpress-submenu-in-2-column/
• I’ve tried adding justify-content: space-evenly; or justify-content: space-around; to .sub-menu-columns ul.sub-menu.dropdown li which creates the box I want on my computer but makes things worse on mobile.
• As per SA Bappy’s instructions below I’ve inserted .sub-menu-columns ul.sub-menu { column-count: 2; column-gap: 10px; } and removed .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) { line-height: 45px; width: max-content; }, which give me the box I want but the left-hand column spills off the page and the text is centered, not aligned left. Any suggestions to improve that specific solution?

Completely out of my depth here, so any input it hugely appreciated! I’m really hoping I can work my way out of this one using CSS only because I’m pretty new to this coding thing.

Solution

Thanks to the amazing SA Bappy I’ve solved this thing like this:

.sub-menu-columns ul.sub-menu {
column-count: 2;
column-gap: 10px;}

.sub-menu-columns .sub-menu li {
  max-width: 250px;}

ul#menu-main-menu ul ul {right: unset; left: 100%;}