Wordpress menu center aligned and spaced evenly - css

Question

I need some help regarding my menu arrangement. I'm using Wordpress on my site, with Vantage theme of which I even bought the premium theme.
My problem is the following: I'd like to make my menu items centered, spaced evenly, and I can't seem to achieve that without messing up my sub-menus.
Here's what I tried so far, without success:
https://stackoverflow.com/a/14103766/3990536
http://icode4you.net/wordpress-tricks-create-an-automatically-centered-and-evenly-spaced-navigation-menu/
https://stackoverflow.com/a/16274725/3990536
The codes actually work; my menu gets aligned niceley, but it also affects my sub-menus, I assume because they use the same class. I can't seem to figure out how to define new class for them, or separate the sub-menu from the actual main menu.
The thing I don't understand here, is the connection between my sub-menus and the main menu. If I edit .main-navigation li, my sub-menu is affected as well, even tough there should be a separate li for my main and my sub menu.
My site is the following: http://classwebdesign.hu/testing/
My menu's css looks like this:
/* =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;
}
Thanks for your help in advance!
EDIT: With the answer below I was able to align them centered, but they are not evenly spaced which would be very important for me as well. Thanks!

Answer 1

Have a look at answers like this on on the site;
Align center menu within div
It's a simple way of achieving what you want without messing your sub-menus. Remove the float from the li and set their display property to inline-block. Then set text-align: center on the parent 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;
}