Make menu items take full width from left to right

Hi there.

Is there a way to make the menu items spread on full width of the site from left to right?

Here is my example

I need the menu items take all the width of the red box.

Here is what i already did (yet of no avail):

.site-header-menu {
width:100%;
}
.main-navigation ul {
width:100%;
display: table;
table-layout: fixed;
border:solid #FF0000 1px;
}
.main-navigation li {
position: relative;
display: table-cell;
}
.main-navigation ul ul li {
display: block;
}