'Other' option displays different in preview

Hi

I am trying to align the Other option with questions above in both check box and radio button type questions. The code works to move the Other box in designer mode, but in preview it does not move and is therefore not aligned with the questions above.

css to move Other is at the bottom, I have included all css in case something in the rest of it is causing issues. Any help greatly appreciated. Thanks in advance

Designer mode

Preview mode

.form-textbox, .form-textarea, .form-dropdown {

   color : #001b25!important;

}

option {

   background : #f8f8f8 !important;

   color : #222 !important;

}

/* selected */

.form-checkbox-item input:checked + label:after {

   background-color : #001b25 !important;

}

.form-label.form-label-top {

   height : 35px;

}

.form-label.form-label-auto {

   display : block;

   float : none;

   text-align : left;

   width : 100%;

}

/* align radio button text */

.form-radio-item label {

   white-space : normal;

   margin-left : 60px !important;

   text-indent : 0px !important;

}

.form-checkbox-item label {

   white-space : normal;

   margin-left : 60px !important;

   text-indent : 0px !important;

}

.form-radio-other-input, .form-checkbox-other-input {

   margin-left : -10px !important;

   width : 60% !important;

   margin-top : 0px !important;

}

I have checked your form and it seems you have used short text entry as your other field.

To clarify, do you still want to align the other field with your checkbox options?

Example:

Looking forward for your response.

Hi Richie P - thanks for your response. I ended up using short text boxes in the end as a workaround to the above problem. It works well so I will remain using short text boxes.

Thanks, Sam