Не перемещается текст

Question

Только начал изучать html и css. Пытаюсь по гайду на ютубе сделать так, чтобы текст был не возле левого края, а ближе к середине. Переписал все в точности, как на видео, но все равно текст у левого края

<body>
    <header class="header">
        <div class="container">
            affsd
        </div>
    </header>
</body>

.container{
    width: 100%;
    min-width: 1170px;
    margin: 0 auto;
}

Как у меня:

Как у него:

Answer 1

способ 1:

используйте text-align: justyfy

способ 2:

используйте padding-left: только для этого надо скорректировать ширину или явно (смотри пример) или включив box-sizing: content-box чтобы в ширине не учитывался отступ

.center {
  width:      250px;
  height:     30px;
  border:     1px solid black;
  
  text-align: center;
}

.no-center {
  width:      calc(250px - 50px);
  height:     30px;
  border:     1px solid black;
  
  padding-left: 50px;
}

<div class = 'center'>ТЕКСТ</div>

<br>

<div class = 'no-center'>ТЕКСТ</div>

Answer 2

Выровнять по центру можно, добавив блоку с классом container такой стиль: text-align: center;. Данная строка означает следующее: выровнять текст внутри блока с классом container по центру. Строка margin: 0 auto; выставляет отступы снаружи (в данном случае справа и слева) блока с классом container. Данную команду уместно использовать для выравнивания текста только в том случае, если размер блока, в котором находится текст, соответствует размеру текста. Для изучения можете попробовать (хотя в данном случае размер блока будет не совсем по размеру текста, просто для примера):

.container{
    width: 50px;
    margin: 0 auto;
}

БЛОГ НА HUSL

Не перемещается текст

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