How do I fix the padding issue in mobile view?

I inserted a Stripe Payment box and I'm trying to format the rest of my form to line up with it since it seems that I am unable to directly make any changes to the actual payment box. I used the "padding" option in the CSS Editor which seemed to work great from the Desktop version of the website however when I look at the Mobile View (see attached image), everything that I padded is pushed to the right. I'd like everything to be aligned in both the Desktop and Mobile View. Is there a solution for how to fix this? Thanks!

Please inject the following CSS code in your form: 

@media only screen and (max-width: 480px) {

#id_32{

    width: 100% !important;

}

#customFieldFrame_32{

    height: 80px !important;

    width: 100% !important;

}

#id_30 table.form-address-table tr:first-child +tr+tr td:first-child span{

    width: 200px !important;

}

#id_30 table.form-address-table tr:first-child +tr+tr td:first-child span:last-child{

    width: 90px !important;

}

#id_30 table.form-address-table tr:first-child +tr+tr+tr td:first-child span{

    width: 135px !important;

}

#id_30 table.form-address-table tr:first-child +tr+tr+tr td:last-child span{

    width: 135px !important;

}

.form-line{

    padding: 0px 2px 0px 2px !important;

}

#id_42{

    margin-left: 60px !important;

    width: 50px !important;

}

}

Result: https://www.jotformpro.com/form/62667744721968? 

Let us know if you need more help, we will be glad to assist you.

See this guide if you do not know how to inject the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes