标题下方文本排版异常：无法正常居下且重叠问题求助

问题根源在于你给<h1>设置了display: flex，默认的flex-direction是row（横向排列），导致内部的标题文字和div并排显示，最终文本被挤压到屏幕边缘。移除div后出现重叠，大概率是<h1>高度不足，或是下方元素存在布局冲突。

修复方案1：调整flex布局为纵向排列 #

将<h1>的flex-direction改为column，让内部元素垂直居中排列，同时可添加间距优化视觉效果：

<h1 style="font-family: 'Roboto', sans-serif; color: white;
           display: flex; flex-direction: column; /* 核心修改：纵向排列 */
           align-items: center; justify-content: center; font-size: 64px;">
  header

  <div style="font-family: 'Roboto', sans-serif; color: white;
           font-size: 14px; margin-top: 8px;"> <!-- 增加上下间距 -->
    text that needs to be under the header
  </div>
</h1>

修复方案2：移除flex布局，用块级元素自然换行 #

如果不需要flex布局，直接删除<h1>的flex相关属性，通过文本居中和块级元素特性实现垂直排列：

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

解决移除div后的重叠问题 #

若移除div后文本与下方内容重叠，给<h1>添加margin-bottom，或给下方元素添加margin-top来增加间距：

<h1 style="font-family: 'Roboto', sans-serif; color: white;
           text-align: center; font-size: 64px; margin-bottom: 20px;">
  header<br> <!-- 用换行标签替代div -->
  <span style="font-size: 14px;">text that needs to be under the header</span>
</h1>

内容的提问来源于stack exchange，提问作者Mide