Почему блок располагается с огромным отступом?

Question

Вопрос: Почему блок .break расположен от блока h1 с огромным отступом в 440px?
Я нигде этого в коде не указывал.
Как это исправить?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: rgba(47, 60, 255, 0.49);
}

.container {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1600px;
}

.wrapper {
  display: flex;
  justify-content: center;
  background: #303f62;
  height: calc(100vh - 150px);
  min-height: 1100px;
  width: 100%;
}

.content-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: #e3ffa2;
  width: 80%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 80%;
  margin-top: 50px;
  background: red;
}

h1 {
  display: flex;
  text-align: center;
  height: 50px;
  margin: 0 auto 30px auto;
}

.break {
  height: 0;
  width: 100%;
}

<div class="container">
  <div class="wrapper">
    <div class="content-wrap">
      <div class="content">
        <h1>О нас</h1>
        <div class="break"></div>
      </div>
      <div class="break"></div>
    </div>
  </div>
</div>

Answer 1

Потому-что у вас блоку .content задана высота 80%, а h1 находится в нем. Т.е. по сути оступ идет от блока content

Answer 2

У вас для элемента .content указано в стилях display: flex; flex-wrap: wrap;
А align-content не указано. По дефолту оно принимает значение align-content: stretch;
Отсюда и такой эффект. Поставьте align-content: flex-start;, это решит проблему.

Пример с align-content: stretch;

.container {
  background-color: tomato;
  display: flex;
  flex-wrap: wrap;
  
  height: 500px;
}

.box {
  width: 200px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Пример с align-content: flex-start;

.container {
  background-color: tomato;
  display: flex;
  flex-wrap: wrap;
  
  align-content: flex-start;
  
  height: 500px;
}

.box {
  width: 200px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Ваш пример:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: rgba(47, 60, 255, 0.49);
}

.container {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1600px;
}

.wrapper {
  display: flex;
  justify-content: center;
  background: #303f62;
  height: calc(100vh - 150px);
  min-height: 1100px;
  width: 100%;
}

.content-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start; /* добавил */
  
  background: #e3ffa2;
  width: 80%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* добавил */
  
  width: 100%;
  height: 80%;
  margin-top: 50px;
  background: red;
}

h1 {
  display: flex;
  text-align: center;
  height: 50px;
  margin: 0 auto 30px auto;
}

.break {
  height: 0;
  width: 100%;
  
  border-bottom: 10px solid rgba(47, 60, 255, 1); /* просто выделил */
}

<div class="container">
  <div class="wrapper">
    <div class="content-wrap">
      <div class="content">
        <h1>О нас</h1>
        <div class="break"></div>
      </div>
      <div class="break"></div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Почему блок располагается с огромным отступом?

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