title: Align text left above (relative to) div
body: <p>I have some <code>h2</code> text that is currently aligned to the left in the mobile view, above a centered div. How can I instead align it flush left relative to the div in the mobile view (with media query provided in the CSS below applied)? </p>
  
  <p><a href="https://i.stack.imgur.com/sIJb4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sIJb4.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://codepen.io/nataliecardot/pen/MGmvpZ" rel="nofollow noreferrer">CodePen</a></p>
  
  <p>Relevant HTML:</p>
  
  <pre><code>&lt;section class="container-projects"&gt;
          &lt;h2 class="portfolio-header"&gt;Featured Work&lt;/h2&gt;
          &lt;div class="project"&gt; 
  </code></pre>
  
  <p>Relevant CSS:</p>
  
  <pre><code>    .portfolio-header {
        /* Puts header in its own row without removing from container with row flex direction (setting parent container to wrap also required) */
        width: 100%;
        text-align: left;
        color: #7d97ad;
      }
  
      .container-projects {
        display: flex;
        /* Parent container needs this for flex-item to take full width in row */
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        margin: 2em 0;
      }
  
  /* Special styling for screens up to 767px wide, inclusive (applies to landscape phones) */
  @media screen and (max-width: 767px) {
    header, .container, footer {
      max-width: 100%;
    }
  
    /* Must specify max-width for img even though parent .container has the same declaration because max-width isn't inherited */
    .container img {
      max-width: 100%;
    }
  
    .project {
      /* Centers projects (aligned left otherwise) */
      margin: 0 auto;
    }
  
  }
  </code></pre>