Не срабатывают CSS свойства .container

Question

Создала в файле index.html контейнер:

<body>
  <div class="container">
    <h1>Hello, world!</h1>
  </div>
</body>

В CSS файле прописала для него свойства:

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

Но, заголовок Hello, world! не сдвинулся с места. Хотя, в рамках контейнера, у него должен появиться отступ слева, т.к. контейнер центрирован. Надпись осталась на месте, как если бы она была сама по себе, не в контейнере.

Файл CSS точно подключен, проверяла - меняла background-color всего body, менялся. Шрифт и его размер тоже меняются, значит, проблема не в подключении самого CSS.

В чём может быть проблема? Почему заголовок не изменил положение?

Answer 1

Насколько я понял, то Вам нужно центрировать заголовок. Запустите пример ниже и давайте разберёмся:

*    { box-sizing: border-box;  }
html { border: 3px solid blue;  }
body { border: 3px solid green; }
div  { border: 3px solid gold;  }
h1   { border: 3px solid red;   }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

<body>
  <div class="container">
    <h1>Hello, world!</h1>
  </div>
</body>

Все представленные элементы в HTML-разметке - блочные, т.е. они по умолчанию растягиваются занимая всю доступную ширину.

В примере мы видим, что все элементы растянулись по-максимуму. Именно поэтому, при небольшой ширине страницы не видно, как отрабатывает margin: 0 auto;. При ширине страницы больше, чем max-width: 1200px;, всё работает, как положено.

Таким образом, становится, ясно почему не центрируется .container - это блочный элемент, он распирается максимально (width: 100%;), отступы пропадают, а следовательно не к чему применять margin: 0 auto;. Вариант решения - задать фиксированную ширину, но нам нужно не это.

Чтобы центрировать заголовок, достаточно добавить выравнивание текста в самом теге заголовка h1:

*    { box-sizing: border-box;  }
html { border: 3px solid blue;  }
body { border: 3px solid green; }
div  { border: 3px solid gold;  }
h1   { border: 3px solid red;   }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

<body>
  <div class="container">
    <h1>Hello, world!</h1>
  </div>
</body>

БЛОГ НА HUSL

Не срабатывают CSS свойства .container

Ответы (1 шт):