Мы изменили тип у <main>, и его содержимое автоматически выстроилось в две колонки. Но сейчас они выглядят неаккуратно, а их размеры не соответствуют макету. Разберём, как это исправить.

По умолчанию флекс-элементы не переносятся на новую строку и ужимаются до содержимого. Поэтому раздел с фотографией сжался ровно до ширины картинки. Другой же раздел занял всё оставшееся пространство из-за текста. Текст, даже во флекс-элементе, старается занять столько места по ширине, сколько может.

Из-за этих особенностей сеточным флекс-элементам лучше всегда явно прописывать ширину. Для этого проще всего использовать свойство width:

width: 550px;

По умолчанию свойство width задаёт ширину содержимого бокса (content) и не учитывает внутренние отступы и ширину рамки.

Рассмотрим пример:

.box {
  width: 100px;
  padding-left: 20px;
  padding-right: 30px;
  border: 5px solid black;
}

В этом случае полная ширина бокса окажется 160px, потому что ширина содержимого сложится с шириной отступов и рамок: 100px + 20px + 30px + 5px + 5px (рамка справа и слева).

Это поведение width можно изменить. О том, как это сделать, мы поговорим в одной из следующих частей.

Чтобы содержимое колонок не прилипало к краям боксов, следует добавить им внутренние отступы. Свойство padding работает для флекс-элементов так же, как для блочных боксов.

Зададим колонкам (разделу с классом bio и разделу с классом photo) фиксированную ширину и внутренние отступы.