h1 and h4 weirdly sticking together in one line-CodePudding

Normally two the two headings must appear on separate lines, but they stick together and even <br> doesn't do anything here! I wonder why that is happening, I am following a tutorial on youtube and doing exactly what I was told I get this result which is different from what tutor shows, h1 and h4 being on two lines centered.

.hero {
  height: 40vh;
  background: url(../assets/artificial-leather-material.jpg) center/cover no-repeat;
  margin-bottom: 2rem;
  border-radius: var(--borderRadius);
  position: relative;

}

.hero-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0rem;
  background: rgba(0, 0, 0, 0.07);
}

.hero-text {
  display: flex;
  align-items: center;
  justify-content: center;
/*   color: white; */
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  margin-bottom: 1.38rem;
  font-family: var(--headingFont);
  font-weight: 400;
  line-height: 1.3;
  text-transform: capitalize;
  letter-spacing: var(--letterSpacing);
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {
  font-size: 2.441rem;
}

h3 {
  font-size: 1.953rem;
}

h4 {
  font-size: 1.563rem;
}

h5 {
  font-size: 1.25rem;
}

<main >
     <!-- header -->
     <header >
     <div >
       <div >
         <h1>lorem ipsum</h1>
         <h4>nonsense at its finest</h4>
       </div>           
     </div>
    </header>
   </main>

CodePudding user response：

It is because .hero-text uses flexbox layout and its default behavior is to stack its children along x axis.

You can change it with flex-direction: column in order to stack the elements along vertical axis.

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

But it takes time to understand flexbox, so in case you would find it confusing, you can simple take all the .hero-text definitions away, which will cause that it will act like default block element (where block elements are stacking below each other)... And then, if you want to make text centered, you can do it in an easier way using text-align: center.

.hero-text {
  text-align: center;
}

CodePudding user response：

Try to add flex-direction: column;

.hero {
  height: 60vh;
  background: url(../assets/artificial-leather-material.jpg) center/cover no-repeat;
  margin-bottom: 2rem;
  border-radius: var(--borderRadius);
  position: relative;
}

.hero-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0rem;
  background: rgba(0, 0, 0, 0.07);
}

.hero-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /*color: white; */
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  margin-bottom: 1.38rem;
  font-family: var(--headingFont);
  font-weight: 400;
  line-height: 1.3;
  text-transform: capitalize;
  letter-spacing: var(--letterSpacing);
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {
  font-size: 2.441rem;
}

h3 {
  font-size: 1.953rem;
}

h4 {
  font-size: 1.563rem;
}

h5 {
  font-size: 1.25rem;
}

<main >
  <!-- header -->
  <header >
    <div >
     <div >
       <h1>lorem ipsum</h1>
       <h4>nonsense at its finest</h4>
     </div>
    </div>
  </header>
</main>