I was trying to add my text right under my header but it gets squished at the edge of the screen. Code:

<h1 style="font-family: 'Roboto', sans-serif; color: white;
           display: flex; align-items: center; justify-content: center; font-size: 64px;">
  header

  <div style="font-family: 'Roboto', sans-serif; color: white;
           display: flex; align-items: center; justify-content: center; font-size: 14px;">
    text that needs to be under the header
  </div>
</h1>

I tried removing the div but then the text goes on top of the text below it. I'm trying to get it to be right under my header.

CodePudding user response：

your mistakes are,

1. tags like h1 or p are only to be child, you can not use them as parent ( I don't know why it didn't showed you any errors ) 2.when you use flex , it takes flex-direction:raw as deafult, you will have to add it as "flex-direction:column"

<div style="font-family: 'Roboto', sans-serif; color: white;
           display: flex; align-items: center; justify-content: center; font-size: 64px;" >
header
<div style="font-family: 'Roboto', sans-serif; color: white;
           display: flex; align-items: center; justify-content: center; font-size: 14px;" >
text that needs to be under the header
</div>
</div>

just do this and you will be all good!

hope you understand...

CodePudding user response：

Not sure I understand what you mean, but why don't you move the div outside the h1-tag:

<h1 style="font-family: 'Roboto', sans-serif; color: white; display: flex; align-items: center; justify-content: center; font-size: 64px;">
    header         
</h1>
<div style="font-family: 'Roboto', sans-serif; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px;">
    text that needs to be under the header
</div>

https://jsfiddle.net/0y5umnoz/