aligning form fields and spacing

you guys just helped me with my other registration form and it looks amazing - can u help me with the aligning and spacing on this form too?????? http://buildingbridgescoalition.org/registration-form/

if u can provide css code like before that would be a BLESSING!

HEADERS AND TITLES SHOULD BE BLUE LIKE THE ONE THAT SAYS BILLING INFO: I WANT IT TO LOOK LIKE MY FORM ON THIS PAGE ( http://buildingbridgescoalition.org/moreinforsvp/ ) AS MUCH AS POSSIBLE. JUST DIF FORM FIELDS ON PART OF IT.  

Attached is what i am trying to do with my form here: http://buildingbridgescoalition.org/registration-form/

i need some serious help!? THANK U IN ADVANCE FOR BEING TERRIFIC AND AMAZING!!!

I MADE A BIG MISTAKE - SORRY HERE IS THE CORRECT IMAGE/FORM I AM TRYING TO MAKE.

 

SEE ATTACHED HERE.

As far as I can see on other threads related to the same, this should be the CSS code that you will need to inject on your form: 

.form-payment-total {

    width: 150px !important;

    left: 159px !important;

    margin-top: -20px !important;

}

 

input.form-textbox.cc_ccv {

    width: 200px !important;

    margin-left: 10px;

}

 

select#input_13_cc_exp_year {

    width: 200px !important;

    margin-left: 10px;

}

 

li#id_10 {

    margin-left: 7px;

}

 

[data-type="control_phone"] .form-sub-label-container:first-child {

    display: none;

}

 

[data-type="control_phone"] .form-sub-label-container {

    width: 100%;

}

Regarding to the color of the text this should be the CSS code that will change it: 

.form-payment-total, #ccTitle13{

    color: #0070B3;

    font-size: 16px;

    font-weight: 600;

    font-family: 'Open Sans', Arial, sans-serif;

    padding-bottom: 15px;

}

This guide will help you to inject the CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

Do get back to us and let us know the result of injecting this CSS code. 

This ididn't work at all.......althought the 2nd code did change the color but the top code didnt work.

Maybe I wasn't clear - I need the css code to make this image attached look exactly like my form: http://buildingbridgescoalition.org/registration-form/

I keep messing iwth it and I can't get my form to look like the image below - can u provide me with a code to make it look like the pic below???

 

First of all, I've deleted some CSS errors on your form.

In addition to that, can you add the CSS code below?

#cid_13 span.form-sub-label-container {

    width : 200px !important;

    

}

Feel free to contact us anytime, we will be glad to assist you.

this looks nothing like the image I was asking about - I was just trying to get my current form here: too look like this image I made. I just cant get the box sizes and everything to look the same- can u help me???

 

RIGTH NOW MY FORM:

https://www.jotform.com//?formID=60548442926158#design

 

I WANT IT TO LOOK JUST LIEK THIS:

 

There are so many CSS code in tour form. Because of that reason, there is conflict between your codes.

To solve that issue, I 've deleted the whole code on your cloned form and added the code below:

#cid_13 .form-sub-label-container {

    width : 200px!important;

    margin-right : 15px!important;

}

#input_13_quantity_1005_0 {

 width : 50px !important;

position : relative !important;

top : -30px !important;

margin-left : 349px !important;

}

input.form-textbox.cc_ccv {

width : 200px !important;

}

input.form-textbox.cc_number {

margin-right : 03px;

width : 200px !important;

}

#input_13_cc_exp_month {

width : 200px !important;

margin-right : 03px;

}

#input_13_cc_lastName {

margin-left : -45px !important;

}

#id_5 {

width : 200px !important;

}

#input_5 {

 width : 200px !important;

}

#first_4 {

width : 200px !important;

}

#last_4 {

width : 200px !important;

 margin-left : -40px !important;

}

#first_9 {

width : 200px !important;

margin-right : 03px;

}

#last_9 {

width : 200px !important;

margin-left : -40px !important;

}

#id_10 {

width : 200px !important;

margin-right : 03px;

}

#input_10_area {

width : 50px !important;

margin-left : 25px;

}

 

#input_10_phone {

 width : 130px !important;

margin-left : 25px;

}

#input_11 {

width : 430px !important;

}

.form-payment-total {

width : 100px !important;

margin-left : 359px !important;

margin-top : -20px !important;

}

.form-payment-total, #ccTitle13 {

color : #0070B3;

font-size : 16px;

 font-weight : 600;

font-family : 'Open Sans', Arial, sans-serif;

padding-bottom : 15px;

}

#label_10 {

 margin-left : 25px;

}

#input_6_addr_line1 {

width : 422px !important;

}

#input_6_city {

 width : 200px !important;

}

#input_6_state {

width : 200px !important;

}

#input_6_postal {

width : 200px !important;

}

#input_6_country {

width : 200px !important;

}

.form-product-container {

width : 100% !important;

 

}

#cid_13 label.form-product-container {

font-family : open sans;

}

#cid_13 span.form-product-item {

width : 400px  !important;

}

#sublabel_area , #sublabel_phone {

margin-left : 25px;

}

 #sublabel_last {

 

 margin-left : -33px;

}

#sublabel_cc_lastName {

margin-left : -33px;

}

In addition, to that, I've changed the position of your text fiellds.

You can clone and check it.

https://form.jotform.com/61103287721954

Here is how it works on my side:

if you need additional assistance we will be happy to assist you.