两个文本对齐.一个在图像上

Question

我有以下HTML（JSFiddle示例）：

<header>
  <div class="wrapper">
    <p>Header Text</p>
  </div>
</header>
<div class="intro">
  <div class="frame">
    <img src="https://via.placeholder.com/800x240">
  </div>
  <div class="inner">
    <div class="wrapper">
      <p>Body text</p>
    </div>
  </div>
</div>

目标

1. 正文文本必须位于图像上方;

2. 正文文本和标题文本必须左对齐。

问题是当将屏幕大小调整为小尺寸时 正文文本和标题文本未对齐。

包装类负责保持中心对齐的区域，宽度可达 1024px，其中的内容放置如"标题文本"和"正文文本"......

如何解决这个问题？

CSS 代码如下：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@media screen and (max-width: 400px) { 
  .wrapper { padding: 0 40px;}
}
@media screen and (min-width: 401px) {  
  .wrapper {
    margin: 0 auto;
      width: 90%;
  }
}
img {
  height: auto;  
  max-width: 100%;
  outline: 0; 
  width: 100%;
}
div.intro {
  overflow: hidden;
  position: relative;  
}
@media screen and (max-width: 400px) { 
  div.frame {
    margin: 0 -14rem; 
  }
  div.frame {
    margin: 0 -4rem; 
  }
}
div.inner {
  max-width: 600px;
  position: absolute;
  top: 40px;
}

Answer 1

尝试使用此 css 代码

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
 }
 @media screen  { 
   .wrapper { padding: 0 40px;}
 }
 @media screen {  
   .wrapper {
      width: 90%;
   }
 }
 img {
   height: auto;  
   max-width: 100%;
   outline: 0; 
   width: 100%;
 }
 div.intro {
   overflow: hidden;
   position: relative;  
 }
 @media screen and (max-width: 400px) { 
   div.frame {
     margin: 0 -14rem; 
   }
   div.frame {
     margin: 0 -4rem; 
   }
 }
 div.inner {
   max-width: 600px;
   position: absolute;
   top: 40px;
 }