Как растянуть меню на всю ширину? На движке WordPress через CSS

Разбираюсь в CSS плохо, методом тыка ничего не получилось, хорошо хоть хуже не стало, то что в интернете писали, тоже не помогает, вот собственно сам код:

/*--------------------------------------------------------------
Menus
--------------------------------------------------------------*/

.main-navigation {
margin: auto;
display: block;
float: left;
clear: both;
width: 100%;
padding: 0 30px;
border-top: 3px solid #444;
border-right: 1px solid #ebebeb;
border-bottom: 3px solid #444;
border-left: 1px solid #ebebeb;
background-color: #fff;
font-family: "Oswald", sans-serif;
font-weight: 300;
}

.main-navigation ul {
margin: auto;
padding-left: 0;
list-style: none;
}

.main-navigation li {
float: left;
position: relative;
margin: auto;
padding: 15px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.main-navigation a {
display: block;
position: relative;
z-index: 11;
color: #505559;
text-decoration: none;
}
.main-navigation ul ul {
float: left;
position: absolute;
z-index: 99999;
top: 100%;
left: -999em;
background-color: #272e37;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

.main-navigation ul ul ul {
top: 0;
left: -999em;
}

.main-navigation ul ul a {
width: 100% ;
color: #fff;
}

.main-navigation ul ul li {
border-bottom: 1px solid #fff;
-webkit-box-shadow: none;
box-shadow: none;
font-weight: 300;
text-transform: none;
}
.main-navigation ul ul li:last-of-type {
border: 0;
}
.main-navigation ul ul li:hover {
-webkit-box-shadow: none;
box-shadow: none;
}

.main-navigation li:hover > a,
.main-navigation li:hover::before,
.main-navigation ul ul li::before {
color: #fff;
}

.main-navigation ul li:hover > ul {
left: 0;
}

.main-navigation ul ul li:hover > ul {
left: 100%;
}

.main-navigation li::before {
float: left;
margin-right: 5px;
color: #1e262d;
font-family: Fontawesome;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.slicknav_nav li:hover {
background-color: transparent;
}
.slicknav_nav li::before {
display: none;
}
.main-navigation a {
float: left;
}
.main-navigation ul ul a {
float: none;
}
.menu-fallback {
font-size: 20px;
line-height: 50px;
}

.site-main .comment-navigation,
.site-main .paging-navigation,
.site-main .post-navigation {
overflow: hidden;
margin: 0;
padding: 30px;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
background-color: #fff;
}
.custom-menu-item-1:hover,
.custom-menu-item-1 .sub-menu {
background-color: #f0696a;
}
.custom-menu-item-2:hover,
.custom-menu-item-2 .sub-menu {
background-color: #5b8ac0;
}
.custom-menu-item-3:hover,
.custom-menu-item-3 .sub-menu {
background-color: #ed945d;
}
.custom-menu-item-4:hover,
.custom-menu-item-4 .sub-menu {
background-color: #9f76ca;
}
.custom-menu-item-0:hover,
.custom-menu-item-0 .sub-menu {
background-color: #7fc09b;
}
.custom-menu-item-1 {
border-top: 3px solid #f0696a;
}
.custom-menu-item-2 {
border-top: 3px solid #5b8ac0;
}
.custom-menu-item-3 {
border-top: 3px solid #ed945d;
}
.custom-menu-item-4 {
border-top: 3px solid #9f76ca;
}
.custom-menu-item-0 {
border-top: 3px solid #7fc09b;
}