Main Nav Background Showing When Centered On Boxed Layout

Hi

I’m experimenting with a new site here: http://bit.ly/1cIuFJm

As you can see, I’ve tried to center the main navigation but this has led to a white bar showing on the right hand side where the nav bar has shifted along. How can i remove this?

My current custom css is below:

.title_container .breadcrumb { display: none; }

h1 { color: #000000 !important; }
h2 { color: #000000 !important; }
h3 { color: #000000 !important; }

#footer .widgettitle { color: #ffffff !important; }

.title_container {
display: none;
}

@media only screen and (min-width: 767px) { .social_header .phone-info span { font-size: 20px; } }

.main_menu a {
color: #d6b307 !important;
}

.main_color .avia-icon-list .iconlist_icon { background-color: #d4b208; }

.logo {
width: 100% !important;
}

.logo a {
width: 300px!important;
margin: 0 auto!important;
}

.main_menu { left: 19%; }

#header .container {
padding: 5px ;
}

.main_menu .menu a {
border-left: 0px !important;
border-right: 0px !important;
font-size: 19px!important;
}

h1, h2, h3 {
text-transform: none !important;
}

Thanks,
Rob