Align input[submit] with text field - css

Question

I'm a CSS/HTML newbie and have tried to do research on this but am stumped. I've seen others with a similar problem, but their submit button and text field are only slightly misaligned. Mine is vertical but I want it horizontal.
I tried adding display: inline-block to both the text field and submit button elements, but it didn't fix the issue.
Here is the embed code for the form:
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://julienkozak.us14.list-manage.com/subscribe/post?
u=f46b7a895f8d332e0127067ad&id=4fbc88f22f" 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="" name="EMAIL" class="required email" id="mce-
EMAIL" placeholder="e-mail address">
</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_f46b7a895f8d332e0127067ad_4fbc88f22f" tabindex="-1"
value=""></div>
<div class="clear" ><input type="submit" value="Get Updates"
name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
The rest of the code you see is the CSS :
/* MAILCHIMP top form */
#mc_embed_signup {
text-align: center;
width: 300px;
}
/* Styles the header text above the inputs */
#mc_embed_signup h2 {
font-size: 18px;
margin: 0 0 20px;
color: #000000;
text-align: center;
}
/* Adds extra space around the input boxes */
#mc_embed_signup .mc-field-group {
padding: 10px 0;
}
/* Styles the input boxes */
#mc_embed_signup input {
width: 200px;
background: white;
height: 40px;
border-radius: 0px;
display: inline-block;
}
/* Styles the subscribe button */
#mc_embed_signup .button {
background-color: gray;
color: #ffffff;
margin: 0 auto;
width: 100px;
height: 40px;
display: inline-block;
}
julienkozak.com/ The form is at the top of this page.
Thank you so much for your patience with me.

Answer 1

Have you considered using bootstrap?
You could also use bootstrap's row functionality to dynamically set the fields of your div tag to a certain part of the page. This has the added benefit of making your page responsive to a variety of screens and monitors.

Answer 2

You can use flexbox on the wrapping div mc_embed_signup_scroll using display:flex. I put margin-top:10px on the button to align it with the input field.
/* MAILCHIMP top form */
#mc_embed_signup {
text-align: center;
width: 300px;
}
/* Styles the header text above the inputs */
#mc_embed_signup h2 {
font-size: 18px;
margin: 0 0 20px;
color: #000000;
text-align: center;
}
/* Adds extra space around the input boxes */
#mc_embed_signup .mc-field-group {
padding: 10px 0;
}
/* Styles the input boxes */
#mc_embed_signup input {
width: 200px;
background: white;
height: 40px;
border-radius: 0px;
}
/* Styles the subscribe button */
#mc_embed_signup .button {
background-color: gray;
color: #ffffff;
margin: 0 auto;
width: 100px;
height: 40px;
margin-top:10px;
}
#mc_embed_signup_scroll{display:flex}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://julienkozak.us14.list-manage.com/subscribe/post?
u=f46b7a895f8d332e0127067ad&id=4fbc88f22f" 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="" name="EMAIL" class="required email" id="mce-
EMAIL" placeholder="e-mail address">
</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_f46b7a895f8d332e0127067ad_4fbc88f22f" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Get Updates" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>