mobile menu background color

to @kharisblank, I have seen that you have helped others with a similar issue, however, when copying in the code that you recommended, it helped on the preview menu, but not on the actual menu when testing on a phone. I even tried using a separate phone to ensure there were no caching issues.

When you click on the mobile menu (hamburger) 2 of the 5 menu options have a white background unlike the black background that the rest of the menu has. And the sub menu is in blue. the extra CSS I have is:

@media only screen and (max-width:767px){

.header-wrap .container{
text-align: left;
}

#mainnav-mobi ul li {
background-color: #000000; !important
}

#mainnav-mobi ul ul.sub-menu li {
background-color: #000000; !important
}

.header-wrap .btn-menu{
float: right;
margin-right: 15px;
}

.header-wrap .col-md-4 {
max-width: 90%;
position: relative;
z-index: 2;
}

.header-wrap .col-md-8 {
margin-top: -70px;
}

#mainnav-mobi {
top: 150px;
}

}

.slides-container .slide-item{
background-position: 50% -300% !important;
}

.slide-inner {
top: 90%;
padding-left: 0px !important;
text-align: center;
}

.site-title {
text-align: left;
}

.site-description {
padding-left: 45px !important;
margin-top: 2px !important;
text-align: left;
}

.menu {
text-align: right;
margin-top: -80px !important;
}

.text-slider .subtitle {
font-size: 15px;
line-height: 40px;
padding: 20px 0 50px;
font-weight: 300;
text-align: center;

The page I need help with: [log in to see the link]