title: Two texts aligned. One over an Image
body: <p>I have the following HTML (<a href="https://jsfiddle.net/1bvmj5xL/3/" rel="nofollow noreferrer">JSFiddle Example</a>):</p>
  
  <pre><code>&lt;header&gt;
    &lt;div class="wrapper"&gt;
      &lt;p&gt;Header Text&lt;/p&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;div class="intro"&gt;
  
    &lt;div class="frame"&gt;
      &lt;img src="https://via.placeholder.com/800x240"&gt;
    &lt;/div&gt;
  
    &lt;div class="inner"&gt;
      &lt;div class="wrapper"&gt;
        &lt;p&gt;Body text&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Objectives</strong></p>
  
  <ol>
  <li><p>Body Text must be over the Image;</p></li>
  <li><p>Body Text and Header Text must be left aligned.</p></li>
  </ol>
  
  <p>The problem is when resizing the screen to a small size Body Text and Header Text are not aligned.</p>
  
  <p>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" ...</p>
  
  <p>How to solve this?</p>
  
  <p>The CSS code is the following:</p>
  
  <pre><code>* {
      -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;
  }
  </code></pre>