Center button in MailChimp - css

Question

Hello,
How can I center a MailChimp button? The button is centered on desktop, but is shifted right on mobile devices, see the picture. I have been trying playing around with some classes and id's but can not solve it really. Not all the CSS code is necessary I guess. Sorry, I know it is messy. (In the HTML I have HIDDEN... the API-key)
Here is the HTML:
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<form id="mc-embedded-subscribe-form" class="validate" action="https://hotmail.us4.list-manage.com/subscribe/post? HIDDEN... " method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<span class="text1">Ta del av vårt nyhetsbrev!</span>
<input id="mce-EMAIL" class="email" name="EMAIL" required="" type="email" value="" placeholder="Skriv din e-post här!" />
<!-- 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 tabindex="-1" name=" HIDDEN...
" type="text" value="" /></div>
<div class="clear">
<center><input id="mc-embedded-subscribe" class="button2" name="subscribe" type="submit"
value="Prenumerera" />
</center>
</div>
</div>
</form></div>
<!--End mc_embed_signup-->
Here are some CSS:
.button2 {
display: inline-block;
text-align: center;
font-family: lora !important;
/* vertical-align: bottom;*/
/* padding-bottom: 0px !important;*/
margin:auto !important;
height:34px !important;
line-height :34px !important;
padding: 5px 12px !important;
border: 1px solid #aeb11b;
border-radius: 8px;
background: #f8fd27!important;
background: -webkit-gradient(linear, left top, left bottom, from(#f8fd27), to(#aeb11b))!important;
background: -moz-linear-gradient(top, #f8fd27, #aeb11b)!important;
background: linear-gradient(to bottom, #f8fd27, #aeb11b)!important;
-webkit-box-shadow: #8d1bb3 0px 0px 24px 0px!important;
-moz-box-shadow: #8d1bb3 0px 0px 24px 0px!important;
box-shadow: #8d1bb3 0px 0px 24px 0px!important;
text-shadow: #ffff33 1px 1px 1px!important;
font: normal normal bold 20px arial!important;
color: #111111!important;
text-decoration: none!important;
}
.button2:hover,
.button2:focus {
border: 1px solid #f8fd27!important;[![enter image description here][1]][1]
background: #ffff2f!important;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff2f), to(#d1d420))!important;
background: -moz-linear-gradient(top, #ffff2f, #d1d420)!important;
background: linear-gradient(to bottom, #ffff2f, #d1d420)!important;
color: #111111!important;
}
.button2:active {
background: #aeb11b!important;
background: -webkit-gradient(linear, left top, left bottom, from(#aeb11b), to(#aeb11b))!important;
background: -moz-linear-gradient(top, #aeb11b, #aeb11b)!important;
background: linear-gradient(to bottom, #aeb11b, #aeb11b)!important;
}
.button2:after{
content: "\0000a0"!important;
display: inline-block!important;
height: 24px!important;
width: 24px!important;
line-height: 24px!important;
margin: 0 -4px -6px 4px!important;
position: relative!important;
top: 0px!important;
left: 0px!important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEJUlEQVRIiaWVXWhURxTHf3P3Zjfq5mOzZE1q1RC1Eb+yxhbBB6lN+yD40BJRUGlAUKIIRTEVn3wzfbFQqiJVH4rFL2qRih8VYkWxtCUSimWLYDS1Jm52UzfG3N17786d6UOycVc3Ee3AwHyc+f/OOcOcEYBBkTbv3Xms/mx1feX0ynWlpaXNU3xTFgSnBiNKKTlijwzanh2zM3ZnaiB19vwX53sfxR4Vk0GMAVQ+qO1EW324NtyxsHbhx0siS8xZ5bPw+/worQAwhIHlWvQ87aE73i17k70/pOKpvUc+PXI/T0cBRj4AwNh+bvumurfqDi2rXRYESGQSDNlDZFUWpRUCgSEMAmaAUGmIyNQIz5xndPV3DSeSiW2HWw6fznNYFUSw5dyWz8tCZR3VU6uLhjtZ87RHMp3EGrLaj7Uc+zLndA7AhpMbNgWrgt9WlFYQLAm+NgBgMDOIIx1GnoxsPLnh5OlxwJpDa+orZ1Z2C58IVgYqKfOXvREgmUliSxvt6eHUw1TjxR0Xe81INIJZZXY42gkiYVAN4vf5EYjxgzPKZrBq5iqEGF27PXCb2GCsQNxVLkP2UG5abobNjoq5FRt9S9uXzimpKjkotTSkkriei5W18Pv8aDSe9njqPCVUGmLl2yupmVbDovAi+qw++q1+PO1hZS36RvpwPRepJFJJlKHml88p/843e/3sNl2iP8ptSCWxpU3KTuF4DhoNAu4P3cf1XOZXzcdn+FhcvZh7qXt0J7oZSA8UiEslkVoaylD9pivcZk96RXNqZS3iVhyAEqOEu6m7xK04bdE2TGGyLbqNx9Zjbj66WfS8Z3jNovGbxsdGwKjJ31gxYwWhQGjCy2x5p4VoJAqA4znsvbGX6/9cf8lOOapfNBxt8IQhCsrFqTWnaKxuRAiB1hpg0rHruez8eSfXHl4rAGipXdOW9kvVKFcSciKvGiutSGfTZGTmRQBm2k4nhF8UpOhA1wHCU8JF0yMQtC5spWl6EwAZmWHrT1u5+vfVl2y1qxOmLe0YBgWACz0XiooD7Fq2i2gkitYax3NovdzKlQdXihtLYmbGznRi8MGEinmet7/Xzr4V+4DRy113YR2XH1ye+FCGTsFO5jKdvxCYkwH2LN/D/pX7MYRBJpth/Y/rJ40UjSROg6Aeg02cIcDaiWybaprYvXz3ePk48ecJLvVcmswfcDjNcTaOVtMd1BHmDwRvVkZfbIph/qWRQ/T6AMHvPKGJPkw+QcH/7s/YzNfcAsQoADS/coel2Bh8iH5DYQ9I085XHM3F8hwAmt/4hSXcG4MEXktcMozFZg5ydGxFA+QDRt9zF3eYyxkMatE0oDBe4bXE4Swp1nKcW2Oei1x/8dNnfF6LwfvUM421+GgGFmAQQaPQJIAYHp2M8D2d9JJ8/tHn6/wHNkwY75YHNyEAAAAASUVORK5CYII=") no-repeat left center transparent!important;
background-size: 100% 100%!important;
}
#mc-embedded-subscribe {
font-family:lato !important;
text-transform: none !important;
}
.validate {
text-transform: none !important;
font-family: helvetica;
font-weight:700 !important;
width: 100% !important;
text-align: center !important;
font-size: 19px !important;
line-height: 30px;
font-style: normal;
}
#mc-embedded-subscribe-form,
#mc_embed_signup {
padding: 0px 0px !important;
margin: 0px 0px !important;
}
.mc_embed_signup_scroll,
.mc-embedded-subscribe
.validate
.clear {
position: absolute;
padding: 0px 0px !important;
margin: 0px 0px !important;
left: 50%;
font-family: arial !important;
top: 10%;}
#mc_embed_signup input.email {
height:35px !important;
width: 220px;
}

Answer 1

Your code snippet provided is working just fine.
Problem is that in your page, that you provided in comment, there is float: right declared on your button which I saw by inspecting that element:
input[type=submit], button, input[type=button] {
border: none;
text-transform: uppercase;
margin: 10px 0px 0px;
padding: 11px 20px;
float: right;
...
}
Removing it fixed the issue.
One more thing. Try not to use <center> tag as it is not supported by HTML5
Since you are using WordPress theme that is maybe not editable, add internal or inline style float: none to your HTML page:
Internal style:
<head>
<style>
input[type=submit], button, input[type=button] {
float: none;
}
</style>
</head>
Inline style
<input id="mc-embedded-subscribe" class="button2" name="subscribe" type="submit"
value="Prenumerera" style="float: none"/>
To inspect an element:
Go to your website page
Right click on button
Left click on "Inspect element"
You will see HTML of your page and next to that CSS. Scroll down to see the code that I provided in my answer.