CSS mail chimp form

0

I want the mailchimp field to be aligned with the button and the same height, as you can see it’s slightly off alignment.

Also the text field doesn’t go all the way across, the text in the field gets hidden after 2/3 the way - this is fine on mobile version.

this is my current css code:

#mc_embed_signup { border: none; text-align: center; width: 100%; } /* Signup form container */

.mc-field-group { display: inline-block; } /* positions input field horizontally */

#mce-EMAIL { font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size: 1em; border: 2px solid #ABB0B2 ; color: #343434; background-color: #fff; padding: 1.4em 9em 1.4em 1em; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; display: inline-block; margin: 0; } /* Input Styles */

.clear { display: inline-block; } /* positions button horizontally in line with input */

.button { font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size: 1em; letter-spacing: .03em; color: #fff; background-color: #2386C8 ; padding: .7em 2em; border: 2px solid #2386C8 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block; margin: 0; } /* Button Styles */

:-webkit-input-placeholder { color: #ABB0B2 ; } /* WebKit browsers /
:-moz-placeholder { color:#ABB0B2 ; } /
Mozilla Firefox 4 to 18 /
::-moz-placeholder { color: #ABB0B2 ; } /
Mozilla Firefox 19+ /
:-ms-input-placeholder { color: #ABB0B2 ; } /
Internet Explorer 10+ */

@media (max-width: 768px) { /* positions input field and button underneath each other with 100% width for tablet and mobile */

.mc-field-group { display: block; max-width: 100%; }
#mce-EMAIL { padding: .7em 0 .7em 1em; width: 100%; margin: 0; }
.clear { display: block; width: 100% }
.button { width: 100%; margin: .5em 0 0 0; }

}

Have you tried using inline styles instead of css classes?