Estou tentando criar uma solução para um site em que estou trabalhando, em quais menus e submenus são centralizados horizontalmente, mas os divs se estendem para a largura total da página.

Primeiro, aqui está um exemplo de HTML:

<div id="menu-container" class="full-width">
    <nav id="nav1" class="normal-width">
        <ul class="main-menu">
            <li id="item1">
                <a href="#">item 1</a>

                <ul class="sub-menu">
                    <li id="item11">
                        <a href="#">item 1.1</a>
                    </li>

                    <li id="item12">
                        <a href="#">item 1.2</a>
                    </li>

                    <li id="item13">
                        <a href="#">item 1.3</a>
                    </li>

                </ul>
            </li>

            <li id="item2">
                <a href="#">item 2</a>

                <ul class="sub-menu">
                    <li id="item21">
                        <a href="#">item 2.1</a>
                    </li>

                    <li id="item22">
                        <a href="#">item 2.2</a>
                    </li>
                </ul>
            </li>

            <li id="item3">
                <a href="#">item 3</a>
            </li>

        </ul>
    </nav>
</div>

O CSS para este menu é:

.full-width {
    width: 100%;
}

.normal-width {
    width: 1024px;
    margin: 0 auto 0 auto;
}

a {
    color: black;
    text-decoration: none;
}

.clear {
    clear: both;
}

.main-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;

    position: relative;
    background-color: red;
}

.main-menu > li {
    float:left;
    margin-right:2em;
}

.sub-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;

    display:none;
    background-color: orange;
}

.sub-menu li {
    float:left;
    margin-right:2em;
}

.main-menu > li.selected {
    background-color:orange;
}

.main-menu > li.selected .sub-menu {
    display:block;
    position:absolute;
    left:0;
    right:0;
}

E o jQuery associado é:

// Add a clear div to allow adding background color to main-menu
$(".main-menu").append("<div class='clear'></div>");

// Make the first class selected
$(".main-menu > li:first").addClass("selected");

// Switch the selected class
$(".main-menu > li").click(function() {
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
});

// Disable menu links
$(".main-menu > li > a").click(function(e) {
    e.preventDefault();
});

Tudo o que é bom e elegante, e um menu horizontal adequado é criado. O que estou lutando e não consigo criar é o que você pode ver nesta foto:

Observe o seguinte sobre a imagem:

A borda preta grossa ao redor da imagem é o tamanho e a largura da página da Web (ou seja, as bordas da janela do navegador)

As finas linhas roxas verticais no meio não são visíveis, elas estão na figura para mostrar onde o conteúdo estaria, ou seja, nenhum conteúdo passará para os lados da extrema esquerda ou extrema direita das linhas roxas

Os itens de menu de nível superior têm o plano de fundo vermelho

Os sub-menus aparecerão na área com o fundo laranja

Agora, para o problema:

Observe como os planos de fundo vermelho e amarelo se estendem até as bordas da página, mas os itens dessas páginas aparecem dentro da área de conteúdo dentro das linhas roxas. É isso que estou tentando alcançar, mas não conseguindo. Não consigo estender os fundos para as bordas do navegador da Web (ou seja, largura de página inteira).Meu solutoin centra os fundos vermelhos e laranja no meio.