Adjust checkbox spacing

I am having an issue with checkbox spacing that is strange.  When using preview the boxes look correct. However, in any browser, there is spacing and overlap issues. 

Below are two images - the first one is what I see in preview mode.  The second is what is viewed in a browser (IE, Chrome, Mozilla).  Not sure why even the 2-column is inconsistent in sizing (see first checkbox input and then the yes/no option).  Thanks

Preview mode

Browser view

This only adjust the one input field.  I may have done something wrong because it only wrap the field.  I think there is a way to increase the spread between all selections so that multi 3-column have the same distance between values. I switched the meal choices so the longer strings are the middle value.

Form link:

http://form.jotformpro.com/form/50924825442961

Thanks,

You can change position of your check boxes by Injecting Custom CSS. To do that inside of your Form Builder select Setup & Embed tab, then click on Preferences, then select Form Styles tab and inside of Inject Custom CSS field at the bottom of existing code paste this code:

[data-type="control_checkbox"] .form-input-wide {

max-width : 600px!important;

width : 60%;

}

After adding this code your form will look like this.

Hope this will help. Let us know if you need further assistance.