How to get a boxes aligned?

I am having trouble with formatting my form. I originally was using one of the themed forms but then wanted it to have accessibility so switched to the default theme. Now, I can't get the questions to line up properly for a clean looking form - like it did when I was using the themed one. How do I get this to format properly so that the questions are all equal distance from each other and the same size?

If I change the size of the drop-down questions, the small text questions actually overlap them in the preview mode - even though it looks fine in the build mode.

When I was using the themed version, all of the boxes/questions were the same size and aligned perfectly for a visually clean form. 

Hi Leah,

Thank you for contacting Support.

You may use this CSS code:

#input_12 {

    margin-left : 114px !important;

}

.form-dropdown {

    max-width : none !important;

    width : 260px !important;

}

#lite_mode_31 {

        max-width : none !important;

    width : 225px !important;

}

#label_12 {

    margin-left : 114px !important;

}

You may use this guide on how to add CSS code.

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Hope this helps.

Let us know if you need further assistance.

Sam,

Thank you - that helped...slightly...but there are still alignment issues and overlapping.

The lower ones actually look completely fine in the build mode, but then overlap when in preview (as seen in the image below).

Please try enabling the Form columns in the Advanced Form Designer to display the fields in columns.

Please check #3 from the following guide.

https://www.jotform.com/help/423-Setting-up-Form-Columns

Also, please replace the existing CSS code with the following CSS code so that the dropdown fields should be displaying correctly.

.form-dropdown {

        width : 250px !important;

}

Thanks!

Kiran!! THANK YOU!!!! This was the answer!! MUCH appreciated!