How to automatically center the grid's row contents when changing the screen size

I'm trying to build a website with bootstrap and other css resources and I'm trying to fix the following issue in the last 2 days and I think I won't be able to fix it.

I have a row of 50 250x250 cards with a left-margin of 30px. When I'm on the full screen, I get no problems. However, when I change the screen size, a huge gap between the latest card and the screen borders occurs. This continues until the browser can fill the empty space with the following card.

I don't want to have this empty space and want the cards to automatically align themselves to the center.

I've also divided the columns to 10 rows but still, there was no change.

Is there a way to fix this issue? Screenshots are attached for fullscreen and smaller screen.

You can also see it yourself from: <>

Thank you very much for your valuable help.

I have to say your code is a bit of a mess, I would encourage you to go back and reference the bootstrap documentation for proper semantic and structural code as you have a bunch of unnecessary stuff happening.

In a nutshell you have to make your containing div has a text-align: center applied. I also gave a margin-right and left of 15px to offset spacing and maintain centering.

Secondly make sure your column classes make sense and fit into each other mathematically! I've wrapped your images in a col-lg-12 and wrap your images in a col-lg-4 so that there will be at least 3 up. Adjust image sizing as you see fit I made smaller images so you could see the responsiveness in the fiddle more.

.container {
 text-align: center;
}

#card {
background: #FAFAFA;
width: 150px;
height: 150px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
overflow: hidden;
display: inline-block;
}

#card h2 {
background-color: #3F51B5;
opacity: 0.9;
text-align: center;
position: absolute;
margin: 0px;
width: 150px;
}

img {
float: left;
}

Here is a Fiddle https://jsfiddle.net/gward90/oygyj9qd/