Last row items start from left in center-justified div [duplicate]

This question already has an answer here:

• Targeting flex items on the last row 3 answers
• CSS when inline-block elements line-break, parent wrapper does not fit new width 2 answers

I am a beginner in web development. For my showcase website, I want the final result to be like this: Right now I have the following code:

    <div class="container content-container my-4 d-flex flex-wrap justify-content-center">
            <div class="card content-card m-3">
                <img class="card-img-top" src="./images/assets/image-placeholder.png">
                <div class="card-body">
                    <h1 class="card-title">Project 1</h1>
                    <p class="card-texts">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
                </div>
            </div>
            <div> Other Cards ... </div>
    </div>

And the result shows here:

To make the page responsive to different screen size, I want the page can be flex-wrap, and after it wraps, the row should be positioned at the center. While for the last row, the items should start from left. But right now the last row also is also positioned at the center. I want to achieve an effect similar to Pinterest, which can always expand horizontally to fill the screen. How could I achieve this? I am using bootstrap right now. Do I need to use other frameworks or js libraries to achieve this?