将标题（h4）对齐在flex行上方的单独行上

Question

我在弹性行中有一个h4元素和一些内容。

目前看起来像：

我想将h4元素分开并将其放在内容上方的自己的行上，所以它看起来像这样：

我怎样才能实现这一点，最好只使用flexbox？我还尝试从h4中排除.container-projects元素，但即使在尝试margin-right: auto之后，它也没有完全对齐最左边图像的左侧。

CodePen

当前相关的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 -->

当前相关的CSS（行在.container内，从此问题中包含的HTML中省略）：

* {
  /* 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;
}