Align text left above (relative to) div - css

Question

I have some h2 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)?
CodePen
Relevant HTML:
<section class="container-projects">
<h2 class="portfolio-header">Featured Work</h2>
<div class="project">
Relevant CSS:
.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;
}
}

Answer 1

https://codepen.io/anon/pen/OZjWwJ?editors=1100
Slightly modified HTML
<section class="portfolio">
<h2 class="portfolio-header">Featured Work</h2>
<div class="container-projects">
<div class="project">
<img class="project-image" src="https://image.ibb.co/hv4c8n/santorini_small.jpg" alt="View from island of Santorini on a sunny day">
<h3>Project No. 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="project">
<img class="project-image" src="https://image.ibb.co/c9sKM7/coast_small.jpg" alt="Distant view of a rugged island with a sailboat nearby">
<h3>Project No. 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="project">
<img class="project-image" src="https://image.ibb.co/eO9oES/mediterranean_small.jpg" alt="Bird's eye view of a rocky beach with clear turquoise waters">
<h3>Project No. 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</section>
and CSS
.portfolio {
margin: 0 auto;
width: 100%;
}
#media screen and (max-width: 992px) {
.portfolio {
width: 90%;
}
}
This way, you are wrapping both your h2 and your project images in one container, which makes it a little more logical to manage their margin on screen. margin: 0 auto aligns the container at the center of the screen, which is desirable on all screen widths.
The 992px media query comes from Bootstrap 4's standardized grid system: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Answer 2

You can add media query for mobile
#media screen and (max-width: 600px) {
.portfolio-header {
width: 300px;
margin: 10px auto;
}
}