Custom CSS not working when embedding form on Shopify site

Hi, I added custom CSS to personalize my form. When I publish it to my account, it doesn't take into account the CSS I added. It looks different than the form in the builder view:

Once published: 

And the CSS I added:

The background and the button CSS are not taken into account. Can someone please help me figure this out?

Thanks

We would like to apologize for any inconvenience. May we know the link to your website where the form is embedded so we can inspect it, please?

Also, may we know which embed code did you use to embed your form?

Have you tried re-embedding the form to see if that would make any difference?

We will wait for your response.

Hi Mike, Thanks for getting back to me!

I added an !important flag to all the CSS rules and it mostly worked. The only one that doesn't work is the button border for some reason... Do you who why that might be?

Also, for some reason I cannot figure out how to center the whole form - how would you do that?

Thanks

Based on the screenshot you shared with us above,

I see that there is no border on the submit button of your form.

Unlike when previewing the form, I see that there is a border on the submit button

I will look into this and get back to you as soon as possible.

With regards to centering the form:

Are you trying to center the fields against the form or the form against the page?

Yes correct for the button! But if you check my CSS, I added `border: none!important`

Concerning the centering, I want to center the form against the page. For now it's left aligned but I want it centered. 

Thanks

You can try adding this code to remove the border.

button#input_2{

border:none!important;

}

Can you provide us with your webpage link so we can check how the form looks in your page?

to center your form you can add this css code:

.form-all{

margin: auto;

}

Let us know how it goes.

Thanks it worked for the border!

I already have: 

.form-all{

margin: auto;

}

and event with !important it doesn't center the form on the page...

I also tried adding text-align: center

You can try

.form-section{

margin-left:150px;

}

But I'm not sure if it will render well in your website, just adjust the px to your liking.