Почему один элемент из Флексбокса уезжает вправо?

Question

Один элемент из флексбокса почему-то уехал вправо. Как это исправить? Пробовала применять к нему margin-left отрицательный - не помогает. А когда задаю margin-right: auto, то уезжает слишком сильно влево, не вровень с верхним элементом.

.items {
	max-width: 532px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-right: auto;
	margin-top: 53px;
}
.item_title {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 17px;
}
.item_text {
margin-bottom: 82px;
}
.last_item {
margin-left: -25px;
}

<section class="programm">
	<div class="container">
		<h2 class="section_title">Что будет на курсе</h2>
	</div>
	<div class="container">
		<div class="items">
		<div class="programm_item">
			<h3 class="item_title">7 лекций</h3>
			<p class="item_text">насыщенных практикой</p>
		</div>
		<div class="programm_item">
			<h3 class="item_title">2 гипотезы</h3>
			<p class="item_text">минимум, которые проверишь<br>на курсе</p>
		</div>
		<div class="programm_item">
			<h3 class="item_title">3 методички</h3>
			<p class="item_text">с пошаговым описанием<br>действий<br>как провести классный<br>CustDev и как проверить<br>любую гипотезу</p>
		</div>
		<div class="programm_item">
			<h3 class="item_title">20 интервью</h3>
			<p class="item_text">с пользователями твоего<br>продукта</p>
		</div>
	</div>
	</div>
</section>

Answer 1

.container {
  max-width: 600px;
}
.items {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.programm_item {
  width: 50%;
}

.item_title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 17px;
}

.item_text {
  margin-bottom: 82px;
}

<section class="programm">
  <div class="container">
    <h2 class="section_title">Что будет на курсе</h2>
  </div>
  <div class="container">
    <div class="items">
      <div class="programm_item">
        <h3 class="item_title">7 лекций</h3>
        <p class="item_text">насыщенных практикой</p>
      </div>
      <div class="programm_item">
        <h3 class="item_title">2 гипотезы</h3>
        <p class="item_text">минимум, которые проверишь<br>на курсе</p>
      </div>
      <div class="programm_item">
        <h3 class="item_title">3 методички</h3>
        <p class="item_text">с пошаговым описанием<br>действий<br>как провести классный<br>CustDev и как проверить<br>любую гипотезу</p>
      </div>
      <div class="programm_item">
        <h3 class="item_title">20 интервью</h3>
        <p class="item_text">с пользователями твоего<br>продукта</p>
      </div>
    </div>
  </div>
</section>

Answer 2

Сейчас, ширина каждого контейнера меняется относительно его содержимого. Установите фиксированную величину. Например item_text {width: 200px} или width: 50% у родительского div

БЛОГ НА HUSL

Почему один элемент из Флексбокса уезжает вправо?

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