I'd like to visually center .projects__content div while keeping the cards aligned on the left: screenshot
I understand that a wrapped div calculates its width also including gaps when a line isn't perfectly filled, but I'd like to find a solution so that this isn't the case.
Maybe I'm missing something - it's a seemingly simple problem, but I can't seem to solve it.
Here is my code:
<section id="projects"><h2>Mes projets</h2><div class="projects__content"><div class="card card3d archived"><div class="card__image"><img src="https://picsum.photos/300/200" alt="Site web"></div><div class="card__content"><h3>Site web</h3><p>Site web réalisé avec HTML, CSS et JavaScript.</p></div></div><div class="card card3d archived" ...><div class="card card3d archived" ...><div class="card card3d archived" ...><div class="card card3d archived" ...></div></section>#projects { max-width: 1200px;}.projects__content { display: flex; justify-content: left; align-items: center; gap: 1em; flex-wrap: wrap;}.card { --card-width: 16em; --card-padding: calc(.025 * var(--card-width)); width: var(--card-width); aspect-ratio: 7/10; padding: var(--card-padding); border-radius: calc(.03 * var(--card-width)); border: 1px solid rgba(0, 0, 0, .05); transition: transform .4s ease-out, box-shadow .4s ease-out; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 .25em .75em rgba(17, 12, 46, .1);}I've already tried centering the .projects__content div with its parent #project using flex in almost every possible way.