Html 将wordpress子菜单拆分为两列

我尝试了一些代码片段将wordpress子菜单分成两列，并获得了一些成功。但它们并没有完全分开。奇数菜单项下有空格，偶数菜单项上有空格

在上述网页中，菜单-->纳维什塔黄金时段-->第二季

菜单项似乎不在一条直线上，产生了白色的间隙。以下是我使用的CSS代码：

.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;
}

我在wordpress菜单设置中的“第二季”菜单项上应用了这个类“子菜单列”

我需要的是消除差距，如：

---

没有足够的空间让元素彼此相邻。使用

margin

会占用空间，因此会中断到下一行

请删除右边的

边距：300px这不是正确的方法

有多种方法可以实现你想要的

您可以为菜单设置宽度，因此子元素现在将介绍如何拉伸已定义的50%：

.sub-menu { width: 480px; }

使用此选项，列将彼此相邻对齐

如果不希望使用固定宽度，例如，可以使用CSS网格定义子列的外观：

.sub-menu { display: grid; grid-template-columns: 1fr 1fr; }

你认为这会是什么样子？@HowardE请现在查看帖子，我添加了截图。我需要删除我使用方框突出显示的这些间隙