Фон страницы и фон тела не отображаются так, как я думал

Question

Я работаю над этим сайтом: http://www.problemio.com и пытаюсь получить весь фон и заданный фон тела.

Я пытаюсь сделать так, чтобы области слева и справа были синего цвета, а фон тела серым.

Вместо этого происходит то, что по какой-то причине все синее, за исключением того, что заголовок весь серый lol.

Мой файл CSS находится здесь http://www.problemio.com/main.css

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

Answer 1

@ genadinik;

Первая проблема заключается в том, что ваш container div не занял всего height дочерних элементов div, так как это необходимо clear .Второе: сейчас он занимает всего width экрана, поэтому вам нужно определить ширину

 .container{
  overflow:hidden;
  width:1000px;
  margin: 0 auto;
}

Answer 2

Цвет по умолчанию на вашей странице синий:

body {
    background-color : #4dbefa;
}

Похоже, у вас есть div с идентификатором bd, который содержит ваш основной контент. Поскольку вы не указали цвет фона для этого элемента div, он фактически прозрачный, и вы увидите любой фон, который за ним стоит. Вам нужно переопределить цвет фона в этом div, если вы хотите, чтобы цвет был другим.

div#bd {
        background-color: #ccc; /* some form of gray */
}