Я пытаюсь создать решение для веб-сайта, над которым я работаю, меню и подменю которого расположены по центру по горизонтали, но элементы div расширяются до полной ширины страницы.

Прежде всего, вот пример 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>

CSS для этого меню:

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

И связанный jQuery:

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

Все это красиво и модно, и создается правильное горизонтальное меню. То, с чем я борюсь, и я не могу создать, это то, что вы можете видеть на этой картинке:

Обратите внимание на следующее о картине:

Черная толстая рамка вокруг изображения - это полный размер и ширина веб-страницы (то есть границы окна браузера).

Тонкие вертикальные фиолетовые линии в середине не видны, они на рисунке, чтобы показать вам, где будет находиться контент, т.е. никакой контент не перейдет в крайнюю левую или дальнюю правую сторону фиолетовых линий.

Элементы меню верхнего уровня имеют красный фон

Подменю появятся в области с оранжевым фоном

Теперь к проблеме:

Обратите внимание, как красный и желтый фоны распространяются по краям веб-страницы, но элементы этих страниц появляются в области содержимого внутри фиолетовых линий., Это то, чего я пытаюсь достичь, но не могу. Я не могу расширить фон до краев веб-браузера (т. Е. На всю ширину страницы).Мой растворенный раствор центрирует красный и оранжевый фоны посередине.