My current issue involves aligning h2 text to the left relative to a centered div in the mobile view. How can I achieve this alignment with a media query in the provided CSS?
https://i.sstatic.net/sIJb4.jpg
Here is the relevant HTML:
<section class="container-projects">
<h2 class="portfolio-header">Featured Work</h2>
<div class="project">
And here is the relevant CSS:
.portfolio-header {
/* Aligns header flush left relative to the div */
width: 100%;
text-align: left;
color: #7d97ad;
}
.container-projects {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
margin: 2em 0;
}
/* Media query for screens up to 767px wide */
@media screen and (max-width: 767px) {
header, .container, footer {
max-width: 100%;
}
.container img {
max-width: 100%;
}
.project {
margin: 0 auto;
}
}