I'm trying to create a hand of cards effect where the cards overlap each other, similar to how cards look when you're holding them in your hands.
I'm using a flex container to center the cards horizontally. However, when I use negative margins to make them overlap, the group stops centering correctly and the cards drift to the right instead of staying centered.
negative gap didn't make them overlap.
What I want
- The cards should overlap
- The entire overlapping group should stay perfectly centered in the container.
.container { width: 300px; height: 150px; border: 2px solid white; display: flex; flex-direction: row; align-items: center; justify-content: center; /* gap: -40px; */ /* gap does not work for some reason!*/}.card { height: 100px; width: 65px; margin-right: -50px;}html,body { height: 100%; background-color: #000;}<div class="container"><div class="hand"><img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card"><img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card"><img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card"><img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card"><img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card"><img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card"><img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card"><img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card"></div></div>