I have a problem with css positioning of items. I need to position my container on the center of the page, and items inside it should also be in the middle but stacking on the left. My code:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS:
.container{max-width:1600px; text-align:center; display:block;}
.item {width:100px; height:100px;display:inline-block;
background-color:orange;color:black; margin:0 auto;}
This centers everything but the problem is that if there are not enough items to fill the row they are centered on the mid. (They dont stack on the left, the are just centered deppending on screen resolution)
You can preview my fiddle here: https://jsfiddle.net/s9v4c5e7/3/
I also tried flex-box, but result is the same. Can't stack them on the left while being centered. What do I do wrong?
Thanks
