1

I have an h4 element and some content inside a flex row.

It currently looks like:

enter image description here

I want to separate out the h4 element and put it on its own line above the content, so it looks like this:

enter image description here

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.

CodePen

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;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
nCardot
  • 5,992
  • 6
  • 47
  • 83

0 Answers0