Блог

Основной заголовок в заголовке занимает ВСЕ вертикальное пространство и перемещает 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>  
  

Вот css

  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, не затронутого частью «Путешествие обучения».

Здесь вы должны использовать гибкий столбец, добавив его 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>