how to make my menu bar full page width

my menu bar is either a bit short on the right side, or is aligned to the left. the theme settings layout is set to full width and responsive. the footer stretches from side to side, (although I have set the background color to white so you can’t see it right now) so it is ok. I added css to make my menu bar links centered, but I would like to have the bar stretch from side to side like the footer. this is the css I added…

.main-navigation {
text-align: center;
width: 100%;
}

.main-navigation ul {
display: inline-block;
}

here is a link to the page. any help is very appreciated. the theme is called vantage, by site origin.