Form does not preview as it appears in editor

Working a cloned template. Tweaking, fussing editing, etc.

I've rearranged a view items in logical order but the form does not display properly in preview or when embedded to web site.

It appears properly in editor.

Thank you for contacting us.

Is that an Adobe FormsCentral imported form, or some theme based clone form?

It appears that there is some layout conflict caused by margin and/or box-sizing  border-box.

I have sent a bug report ticket to our Development Team. We will update this thread as soon as we have any updates.

Still waiting for a resolution to this issue...

Hello Joseph,

My colleague have already reported this issue to our back end team. Unfortunately we have not received any update form our back end team yet. Upon checking the bug report ticket, I found that one of our developer is already looking into this issue with highest priority.

We will get back to you as soon as we have any update from the assigned developer.

Thank you!

Still waiting to resolve this issue. My site is ready to go live and this form is a final detail.

Any progress?

Unfortunately, we do not have any updates as of this time.

You can try the following workaround in the meantime.

Add a blank Text field after the Check Box field, then decrease its paddings to 0 in order to remove the extra space, and limit the max width of check box items to 145 pixels.

Used CSS:

#id_24 {
padding : 0;
}
.form-checkbox-item {
max-width : 145px;
}

Please see the next animation:

It should fix the layout on published form. Thank you.