Estoy tratando de crear una solución para un sitio web en el que estoy trabajando, en el que los menús y submenús están centrados horizontalmente, pero los divs se extienden al ancho completo de la página.

En primer lugar, aquí hay un ejemplo 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>

El CSS para este menú es:

.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;
}

Y el jQuery asociado es:

// 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();
});

Todo lo que es agradable y elegante, y se crea un menú horizontal adecuado. Con lo que estoy luchando y con lo que no puedo crear es lo que puedes ver en esta imagen:

Tenga en cuenta lo siguiente sobre la imagen:

El borde negro grueso alrededor de la imagen es el tamaño y el ancho de la página web (es decir, los bordes de la ventana del navegador)

Las líneas verticales púrpuras delgadas en el medio no son visibles, están en la imagen para mostrarle dónde estaría el contenido, es decir, ningún contenido pasará al extremo izquierdo o al extremo derecho de las líneas púrpuras

Los elementos del menú de nivel superior tienen el fondo rojo.

Los submenús aparecerán en el área con el fondo naranja.

Ahora, al problema:

Observe cómo los fondos rojos y amarillos se extienden a los bordes de la página web, pero los elementos de esas páginas aparecen dentro del área de contenido dentro de las líneas moradas. Esto es lo que estoy tratando de lograr pero no puedo. No puedo extender los fondos a los bordes del navegador web (es decir, el ancho de página completa).Mi solutoin centra los fondos rojos y naranjas en el medio.