Загрузочный контейнер не является полной шириной (пробелы слева и справа от экрана)?

Question

Я написал некоторые разметку для панели навигации на веб-странице, в настоящее время я пытаюсь перейти к следующему разделу, и я заметил, когда я добавлял другой раздел не расширять всю ширину: image here

I добавлен белый фон в этот раздел, а фон тела черный. Вот некоторые разметки и CSS:

HTML Пример:

<header> 
    <div class="container"> 
     <!-- fun markup here --> 
    </div> 
</header> 
<section id="work"> 
    <div class="container"></div> 
</section> 

CSS Пример

section#work { 
    padding: 100px 0; 
    background-color: white; 
} 

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

Answer 1

Простой ответ здесь заключается в использовании container-fluid.

Пожалуйста, проверьте эту скрипку: https://jsfiddle.net/ya6z789x/1/

Как вы можете увидеть первый container класс (просто container) имеют ширину уставки 1170px при большом видовых, 970px на немного меньше, и так далее (это уменьшает, как вы уменьшаете окно просмотра размер).

Второй пример: container-fluid, установлен на 100% ширину его родительского элемента. Значение, если ваш элемент header не имеет определенной ширины, класс container-fluid будет растягиваться до полной ширины окна.

В качестве альтернативы, если ваш header элемент имел ширину говорят 900px (третий пример), размещение container-fluid непосредственно, как ребенок от него будет сделать container-fluid элемент имеет ширину 900px. Обратите внимание: вам может понадобиться расширить видовое окно скрипта, чтобы увидеть это в действии.