The main title in the header is taking up all the vertical space and shifting the h2 to the right when it should be centered below it. They are supposed to be in the same container but not connected.
https://codepen.io/ychalfari/pen/JVYoNW
https://codepen.io/ychalfari/pen/mgVdLr
I have attempted a few things, like putting the title in a <p> tag, but it still occupies all the vertical space.
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>
This is the 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;
}
I expect
<h2>Documenting the Learning Process in a Fun Interactive way! </h2>