Split wordpress sub-menu into two columns - html

Question

I tried some code snippets to split wordpress sub-menu into two colums and I got some success. But they are not fully splitted. There is white space beneath odd menu-items and white-space above even menu-items. Link for Menu
In the above web page, Menu --> Nawishta Prime Time --> Season 2
It seems the menu-items are not in line and creating white gaps. Following is the CSS code I used:
.sub-menu-columns ul.sub-menu li {
clear: initial;
display: inline-block;
float: left;
width: 50%;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
margin-right: 300px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: right;
}
I applied this class "sub-menu-columns" on the menu item "Season 2" in wordpress menu settings.
What I need is to remove gaps like:

Answer 1

There is not enough space for your elements to be next to each other. With using margin you are taking up the space, so it breakes to the next line.
Please remove the margin-right: 300px; This is not the right way to go.
There are multiple ways to achieve what you like.
You can set a width for your menu, so the child elements now how to stretch the 50% you have defined:
.sub-menu { width: 480px; }
Using this, your columns will align next to each other.
If you do not want to use a fixed width, you can for example use CSS grid to define how the child columns should look like:
.sub-menu { display: grid; grid-template-columns: 1fr 1fr; }