I'm made a memory game with some php and javascript, now I'm having trouble with wrapping the carddeck. Please take a look at the image in the link below.

Image: https://i.stack.imgur.com/ZNRph.png

.card-container { display: inline-block; width: 128px; heigth: 128px; } <div class="carddeck" id="carddeck"> <div class="card-container">card</div> <div class="card-container">card</div> <div class="card-container">card</div> <div class="card-container">card</div> <div class="card-container">card</div> <div class="card-container">card</div> <div class="card-container">card</div> </div>

As you can see, the width of the carddeck (marked in blue), is the width of the screen (100%). Is there a way in CSS to make the carddeck wrap around the cards without the space where no cards are (on the right)?

To visualize what I want, please look at this image: https://i.stack.imgur.com/zjzhA.png

Imagine that the carddeck's width is equal to where the orange line is in the 2nd image. When wrapped nicely, I can do a simple margin-left: auto; and margin-right: auto; to horizontally center the carddeck.

Thanks in advance,

-Ed