Align section heading with the first content item instead of centering in Flexbox layout

I’m working on a section layout where I have a headline and a content container using Flexbox to center the content horizontally. The content container holds several media cards.

<section>
    <h2 class="section-headline">Section Headline</h2>
    <div class="section-content" style="display: flex; justify-content: center; gap: 20px;">
        <div style="border: 1px solid black;">
            <h3>Media Card 1</h3>
        </div>
        <div style="border: 1px solid black;">
            <h3>Media Card 2</h3>
        </div>
        <div style="border: 1px solid black;">
            <h3>Media Card 3</h3>
        </div>
    </div>
</section>

The issue I’m facing is that the headline should align with the start of the first content item (the first media card), but I don’t want to center it within the section itself. How can I align the headline to match the start of the first media card (see the following screenshot) instead of centering it with the content?

I’ve already tried adjusting the margins, but it doesn’t seem to give me the desired responsive result. Is there a Flexbox-based solution or a simple CSS approach that can achieve this?

Any suggestions would be appreciated!

You need to sign in to view this answers

Related Post