change to main nav not showing

I was almost done. Something is canceling all of the css I put in place for the main nav. It was white or no background, floating right, with a special hover color. I tried to make each of them !important to see if that would bring it back but that is not working. I also want to set my mobile nav in the Appearance setting to 620 but will this matter?
Thank you. Below is what was working:
#masthead {
background: #ffffff;
padding: 0 35px 0 35px;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
}
#masthead .hgroup .support-text {
color: #4b4b4b;
font-style: italic;
line-height: 1.5em;
margin-top: -0.6em;
max-width: 50%;
position: absolute;
right: 0;
top: 50%;
}
.main-navigation {
background: #ffffff none repeat scroll 0 0 !important;
}
.main-navigation ul li a{
color: #888888 !important;
}
.main-navigation ul li a:hover{
color: #ffffff !important;
background:#42276B;
}
#search-icon #search-icon-icon {
background-color: #ffffff !important;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 100%;
position: relative;
width: 59px;
}
#search-icon #search-icon-icon .vantage-icon-search {
color: #888888;
display: block;
font-size: 17px;
height: 17px;
left: 50%;
margin-left: -8.5px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 17px;
}
#search-icon #search-icon-icon:hover {
background-color: #42276B !important;
color:#ffffff;
}
#search-icon .searchform input[name=”s”] {
background-color: #42276B !important;
border: medium none;
border-radius: 0;
box-sizing: border-box;
color: #ffffff;
display: block;
font-size: 17px;
font-weight: 300;
height: 42px;
outline: medium none;
padding: 0 15px;
width: 100%;
}

URL: http://www.donnasimmons.com/