Css Wordpress菜单中心对齐且间距均匀

我需要一些关于菜单安排的帮助。我在我的网站上使用Wordpress，我甚至购买了Vantage主题

我的问题是：我想让我的菜单项居中，间隔均匀，如果不弄乱我的子菜单，我似乎无法做到这一点

以下是我迄今为止所做的尝试，但没有成功：

代码实际起作用；我的菜单被对齐了，但它也会影响我的子菜单，我想是因为它们使用相同的类。我似乎不知道如何为它们定义新类，或者如何将子菜单与实际的主菜单分开

我不明白的是，我的子菜单和主菜单之间的连接。如果我编辑.main导航li，我的子菜单也会受到影响，甚至我的主菜单和子菜单都应该有一个单独的li

我的网站如下：

我的菜单的css如下所示：

/* =Menu
----------------------------------------------- */
.main-navigation{
margin:0 -35px;
background:#343538;
font-size:1em;
position:relative;
text-transform:uppercase;
letter-spacing: 0.08em;
/* Font awesome icons */
/* General menu link styling */
/* For when the menu becomes a sticky menu */

}
.main-navigation [class^="icon-"]{
display:inline-block;
margin-right:15px;
font-size:16px;
line-height:0.5em;
color:#CCCCCC;
}
.main-navigation a:hover [class^="icon-"]{
color:#FFFFFF;
}
.main-navigation ul{
list-style:none;
margin:0;
padding-left:0;
zoom:1;
/* Second level menu items */
}
.main-navigation ul:before{
content:'';
display:block;
}
.main-navigation ul:after{
content:'';
display:table;
clear:both;
}
.main-navigation ul li{
display:block;
position:relative;
float:left;
}

.main-navigation ul li:hover > a{
background:#00bcff;
color:#FFFFFF;
}

.main-navigation ul li a{
padding:20px 35px;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.main-navigation ul li a,.main-navigation ul li a > *{
-webkit-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.main-navigation ul ul{
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);
box-shadow:0 1px 2px rgba(0,0,0,0.15);
background:#464646;
display:none;
position:absolute;
top:100%;
left:0;
z-index:99999;
/* Third Level Items */
}
.main-navigation ul ul a{
width:200px;
padding:15px 20px;
}
.main-navigation ul ul li{
position:relative;
/* Hovering over 2nd level items */
}
.main-navigation ul ul li:hover > a{
background:#00bcff;
color:#FFFFFF;
}
.main-navigation ul ul ul{
left:100%;
top:0;
margin-left:0;
}
.main-navigation ul li:hover > ul{
display:block;
}
.main-navigation a{
display:block;
text-decoration:none;
color:#e2e2e2;
font-weight:bold;
}

.main-navigation.sticky{
-webkit-box-shadow:0 2px 1px rgba(0,0,0,0.15);
-moz-box-shadow:0 2px 1px rgba(0,0,0,0.15);
box-shadow:0 2px 1px rgba(0,0,0,0.15);
}
body.has-menu-search .main-navigation ul{
margin-right:59px;
}
/* Handle the navigation slightly differently on mobile devices */
body.mobile-device .main-navigation ul ul{
display:none;
}
body.mobile-device .main-navigation li:hover > ul{
display:block;
}
.mobile-nav-frame [class^="icon-"]{
display:inline-block;
margin-right:10px;
min-width:1em;
}
.mobile-nav-icon{
font-family:'FontAwesome';
display:inline-block;
margin-right:10px;
}
.mobile-nav-icon:before{
font-size:14px;
content:"\f00b";
}
#search-icon{
position:absolute;
top:0;
right:0;
height:100%;
}
#search-icon #search-icon-icon{
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:relative;
display:block;
cursor:pointer;
background-color:#303134;
width:59px;
height:100%;
}
#search-icon #search-icon-icon,#search-icon #search-icon-icon .icon-search{
-webkit-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
transition:all 0.4s ease;
}
#search-icon #search-icon-icon .icon{
position:absolute;
display:block;
width:17px;
height:17px;
top:50%;
left:50%;
margin-top:-8px;
margin-left:-8.5px;
background: url('images/sprites-1-2.png') no-repeat -102px 0;
}
#search-icon #search-icon-icon:hover{
background-color:#00bcff;
}
#search-icon #search-icon-icon:hover .icon{
background: url('images/sprites-1-2.png') no-repeat 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {

#search-icon #search-icon-icon .icon{
background: url(images/retina/search-icon.png) no-repeat;
background-size:17px 17px;
}
#search-icon #search-icon-icon:hover .icon{
background: url(images/retina/search-icon-white.png) no-repeat;
background-size:17px 17px;
}
} 

#search-icon .searchform{
display:none;
position:absolute;
top:100%;
right:0;
width:1080px;
background:#2d2e31;
z-index:10;
overflow-x:hidden;
}
#search-icon .searchform input[name=s]{
color:#d1d1d1;
font-size:17px;
font-weight:200;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
display:block;
width:100%;
height:42px;
border:none;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
background:transparent;
outline:none;
padding:0 15px;
}

提前谢谢你的帮助

---

编辑：根据下面的答案，我可以将它们居中对齐，但它们的间隔并不均匀，这对我来说也非常重要。谢谢

在网站上查看类似的答案

这是一个简单的方法来实现你想要的，而不会弄乱你的子菜单。从li中删除浮点，并将其显示属性设置为“内联块”。然后设置文本对齐：在父ul上居中

    .main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    zoom: 1;
    text-align: center;
    }

    .main-navigation ul li {
    display: block;
    position: relative;
    /* float: left; */
    display: inline-block;
    }

---

谢谢你的帮助，我的菜单现在很好地居中，但它不是均匀分布的。我希望所有菜单元素的宽度相同。我可以用这段代码实现这一点：但在那之后，我的子菜单彼此堆叠在一起，排成一行，一片混乱。我真的不明白为什么我的主导航会同时影响我的主菜单和子菜单。为什么我不能为他们创建一个不同的类，如果我没有，我怎么能创建一个呢？对此我将非常感激。