I am having a formatting alignment error.

Can you please help me with an issue that I am experiencing.  The formatting for my JotForm is not aligning correctly and after trying a few different things to resolve it, I have not been able to do so.  Please see my attached photo below.  The form just looks ugly and is not aligned with the background.  Can you please show me how to fix it?!

Please add the CSS code below in the widget custom CSS tab:

#list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 90%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

Then go to Form Designer > Styles > Custom CSS and add this CSS code:

iframe#customFieldFrame_12{

width: 100% !important;

}

Alternatively, you can just increase the width of the form to fit the widget. Just go to Form Designer > Styles and increase the Form Width.