I have an h4
element and some content inside a flex row.
It currently looks like:
I want to separate out the h4
element and put it on its own line above the content, so it looks like this:
How can I achieve this, preferably using flexbox only? I also tried excluding the h4
element from .container-projects
, but it didn't align perfectly to the left of the leftmost image, even after trying margin-right: auto
.
Current relevant HTML:
<section class="container-projects">
<h4 class="portfolio-header">Featured Work</h4>
<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>
</section> <!-- End of container-project -->
Current relevant CSS (row is inside .container
, omitted from HTML included in this question):
* {
/* Makes width and height include padding, border */
box-sizing: border-box;
max-width: 100%;
}
/* Applies to content within <main> element (excludes header, footer) */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Applies to project section (including header text) */
.container-projects {
display: flex;
flex-direction: row;
}