Styling Mail Chimp Form - css

Question

I have an email opt in form for Mail Chimp at the top of my site and I cannot get the size of it to change. I want the subscribe button to be on the same line as the email field. Am I doing something wrong?
This is my form code:
<div id="mc_embed_signup">
<form action="//gleefulthings.us12.list-manage.com/subscribe/post?u=0277df98c0e296a094149262c&id=87ac16e6a6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="your email address" name="EMAIL" class="email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_0277df98c0e296a094149262c_87ac16e6a6" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
And this is my CSS:
<!-- Defines how wide the opt-in will be and centers everything -->
#mc_embed_signup {
width: 880px;
margin: auto auto !important;
}
<!-- Moves the form to the left and sets the width -->
#mc_embed_signup input.email {
float: left !important;
width: 700px !important;
}
<!-- Defines the height of the div surrounding the form -->
#mc_embed_signup .mc-field-group {
min-height: 20px !important;
}
<!-- Moves the button to the right, removes the rounded corners, pushes the button up 45px -->
#mc_embed_signup input.button {
background: #bbcf14 !important;
color: #fff;
font-weight: 600;
display: inline-block !important;
border-radius: 0px !important;
float: right !important;
margin-top: -45px;
}
Here's a link to my test site: http://gleefulthings.com/WPtestblog/. Any help is much appreciated! I've been Googling and can't figure out why it's not working.

Answer 1

input[type="button"], input[type="reset"], input[type="submit"], .button
{
background-color: #111;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 300;
padding: 16px 24px;
text-transform: uppercase;
width: 140px;
float: right;
height: 52px;
}
#mce-EMAIL
{
width: 89.9%;
float: left;
}
Dear Friend, I am edit your website online as my inspect element Chrome tool, it work fine.enter image description here This is screen shot of afterward applying CSS into your website.
Still you have any problem feel free to contact me.