Main Menu Colors not changing

Hello,
I’ve searched the forum and found the code to change the main menu colors and I’ve added it to my Quick CSS, but the change is not going into effect. Seems that something else is overriding it and keeping the hover color at white. Could you please take a look?
Thank you!

Here is the code I added from my search in the forum:
.header_color .main_menu ul:first-child > li > a { color: #ffffff;}
.header_color .main_menu ul:first-child > li > a:hover { color: #ef0400; }
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: #ef0400;}

Here is the rest of the Quick CSS I added…in case the issue is in there…
h1, h2, h3, h4, h5, h6 {font-weight:normal;letter-spacing: 1px;}

.logo img {padding: 15px 0;}

.single .big-preview.single-big {display: none;}
#top .avia-post-nav { display: none; }
.single-portfolio .page-thumb {display: none;}
.post-entry .big-preview{ display: none !important; }

#header_meta {background: #eff0f0;}
#header_main_alternate { background-color: #00014d; }

.main_menu a {color: #ffffff !important; letter-spacing:1px;}

.av-main-nav > li > a {line-height: 20px!important; height: 25px!important;}

nav.main_menu { margin-top: 10px; height: auto; }

.main_menu ul:first-child > li > a{padding: 0 24px !important;}

#top ul:first-child > li > a {color: #ef0400; font-weight:400; text-decoration:none;}
#top ul:first-child > li > a:hover {font-weight:600; text-decoration:none;}
#top ul:first-child > li > a { border-color: #fff; border-left-style: none;
/*border-right-style:none;*/}

#footer {padding: 0px 0 0px; z-index: 1; }
#socket .copyright{float:right; }
#socket a:hover{text-decoration:none;}