Почему элемент title занимает ВСЕ пространство вертикали в контейнере?

Question

Главный заголовок в заголовке занимает ВСЕ вертикальное пространство и перемещает h2 из центра вправо, который должен находиться под ним и не подключен, кроме того, что находится в том же контейнере.

https://codepen.io/ychalfari/pen/JVYoNW

https://codepen.io/ychalfari/pen/mgVdLr

Это пара вещей, которые я пробовал, но даже просто наличие заголовка в теге <p> занимает все вертикальное пространство.

div class ="header-wrap">
    <header>
      <div class="span-wrap">
        <span id="my">My</span> 
        <span id="journey">Journey</span> 
        <span id="of">of </span>
        <span id="learning">Learning</span></div>
      <h2>Documenting the Learning Process in a Fun Interactive way! </h2>
    </header></div>  

Вот КСС

 header-wrap, header{

  display:flex;
  color:white;  
  background-color:red;
  height: 100vh;
  width:100vw;}

h2 {

  font-size:25px;
  letter-spacing:2px;
  font-family:'Raleway';
  align-self:flex-end;}

.span-wrap{

  display:flex;
  justify-content:center;}


#my{
  font-size:55px;
  position:relative;
  top:30px;
}
span{
  max-height: 65px;
  display:block;
}
#journey{
  top:80px;
  font-size:55px;
  position:relative;
}
#of{
   top:120px;
  font-size:45px;
  position:relative;
  margin: 0 35px;
  border: solid;
  padding: 1px 15px;
  max-height:60px;}
#learning {
   top:185px;
  font-size:55px;
  position:relative;  
}

То, что я ожидаю, - это <h2>Documenting the Learning Process in a Fun Interactive way! </h2>, который будет находиться по центру в нижней части div, не затрагиваемой частью «Путешествия обучения».

Answer 1

Здесь вы должны использовать flexbox столбца , добавив flex-direction: column к вашему header, а затем:

• добавить flex: 1 к span-wrap (занимает доступное свободное пространство после размещения h2, тем самым подталкивая его вниз)
• изменить на align-self: center для h2 элемента

См. Демо ниже:

html body {
  font-family: 'Raleway';
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
}

ul li {
  display: none;
}

header-wrap,
header {
  display: flex;
  color: white;
  background-color: red;
  height: 100vh;
  width: 100vw;
  flex-direction:column; /* added */
}

h2 {
  font-size: 25px;
  letter-spacing: 2px;
  font-family: 'Raleway';
  align-self: center; /* changed */
}

.span-wrap {
  display: flex;
  justify-content: center;
  flex: 1; /* added */
}

#my {
  font-size: 55px;
  position: relative;
  top: 30px;
}

span {
  max-height: 65px;
  display: block;
}

#journey {
  top: 80px;
  font-size: 55px;
  position: relative;
}

#of {
  top: 120px;
  font-size: 45px;
  position: relative;
  margin: 0 35px;
  border: solid;
  padding: 1px 15px;
  max-height: 60px;
}

#learning {
  top: 185px;
  font-size: 55px;
  position: relative;
}

<div class="header-wrap">
  <header>
    <div class="span-wrap">
      <span id="my">My</span> <span id="journey">Journey</span> <span id="of">of </span><span id="learning">Learning</span></div>
    <h2>Documenting the Learning Process in a Fun Interactive way! </h2>
  </header>
</div>
<nav>
  <ul>
    <li>Arrays</li>
    <li>Objects</li>
    <li>Apps</li>
    <li>Design</li>
  </ul>
</nav>
<section>
</section>