Ok, you seem to be delivering a different stylesheet for mobile as the desktop small screen doesn’t match your mobile screen which is odd.
Anyway assuming I am looking at the correct items I don’t see any proper mechanism for centring the elements as they are floated.
Here is a screenshot where I have outlined the elements and you can see that the parents are centred but the inner floated blocks just align-left.
A quick fix would be to add a little padding to move the element to the centre like this:
Which produces this result:
However I think the real problem is that you have not followed the strict bootstrap guidelines in that elements must have a parent container class, then a row class and then finally your content goes into column classes. This structure must be constant.
You have also changed the default padding to 7px on the column classes (although for the items above you removed it all) which means that the boostrap grid is broken because the row class in bootstrap have negative horizontal margins of 15px that match the 15px padding on the column classes and on the container class. All three work in unison and you can’t change one without changing the others accordingly.
As an aside you should never change the default bootstrap code but rather uses over-rides in your custom css where necessary.
Hopefully the quick fix I offered will suffice for now rather than reformatting that whole page.
You should consider a move to bootstrap4 as it uses flexbox rather than floats and is easier to control. However, I realise that’s probably too late at this stage