How to make fields be centered when viewed on mobile devices?

Hello... I could use some help with CSS on how to properly set up the following:

1. I have 4 fields (3 dropdown & 1 text with a single cell table) set up in a 4 column arrangement.

2. When viewing on a tablet or smart phone, columns do not center.... whether it's the fields rendering 2 over 2 on a tablet or in a single column lay on a smart phone.

How can I get the fields / elements to align to center regardless of device, field or label width, etc.

Thanks in advance. 

P.S. I've tried incorporating mobile responsive widget. I've also tried selecting and un-selecting "Enable Form Columns" in the advance designer form layout setting ... not sure exactly what the settings should be or if a CSS solution is the only way to achieve the results I'm looking for.

Please try inserting the below CSS to your Custom CSS Field:

It should make your form look like this:

When viewed on phone. I tried to make it work for most devices.

But please try and let us know how it worked for you.

Thank you!