Div контейнер не растягивает основной div на полную ширину

Я хочу создать макет, где у меня будут разные полноэкранные фоны. Например, верхний цвет полностью оранжевого цвета, внутри полноразмерного div у меня есть контейнер, который хранит все в определенном размере (ширина: 1000 пикселей). И я столкнулся с проблемой. Содержимое контейнера div не растягивает полную ширину div. Поэтому сейчас, чтобы сохранить его работу, я должен установить значение.orange и.red определенной высоты. Но это не решение, потому что сейчас у моего блока есть высоты ххх, что если я добавлю что-то вроде большего количества фотографий - мне нужно установить больше высоты и т.д....

Вот что я имею в виду:

HTML

<div class="full-width orange">
    <div class="container">
        content
    </div>
</div>

<div class="full-width red">
    <div class="container">
        content 2
    </div>
</div>

CSS

.full-width {
    clear: both;
    width: 100%;
    overflow: hidden;
}

.container {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.orange {
    background-color: orange;
}

.red {
    background-color: red;
}

Прошу прощения за мой плохой английский.