Two texts aligned. One over an Image - html

Question

I have the following HTML (JSFiddle Example):
<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>
Objectives
Body Text must be over the Image;
Body Text and Header Text must be left aligned.
The problem is when resizing the screen to a small size Body Text and Header Text are not aligned.
Wrapper class is responsible to keep a center aligned region, with width up to 1024px, where content is placed like "header text" and "body text" ...
How to solve this?
The CSS code is the following:
* {
-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

Try with this css code
* {
-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;
}