Advert List Columns

Hello,

I am having issues with my advert list columns, I would like to fit as much of the columns into a stretched row and content within my landing page. I have created this area of my landing page with a HTML Block with the shortcode [adverts_list list_type=”featured” search_bar=”disabled” columns=”6″] inside the block and I have also used the following css:

.advert-item.advert-item-col-1 {
    width:250px;
    height:250px;
	  font-size:10px;
	margin-top: 2px;
	margin-bottom:2px;
	margin-left:2px;
	margin-right:2px;
}

For each col-1 to col-6

My problem is that whenever I stretch the row and the content out and I select that the row should be placed in the middle and the content should be placed in the middle, I am left with this massive white space on the right. It won’t let me center the columns.

Can you please help me with some css to center the entire HTML Block.

I have tried to set a margin width of 30px on the left in order to push the content to the right, but this doesn’t work in terms of responsiveness between a PC, a laptop and a phone.

Thanks!

The page I need help with: [log in to see the link]