I am having trouble making my div (#signupform) have a light grey background color that extends to the full height of the div.
Currently, the background color stops at the end of the email input field.
Any suggestions on how to fix this issue?
For reference, check out this live example:
#signupform {
background-color: lightgray;
}
#signupinput {
display: block;
text-align: center;
max-width: 50%;
}
.email-sign-up-headline {
padding-top: 10px!important;
}
#mcsignupbutton {
width: 50%;
display: block;
text-align: center;
margin-left: 25%;
}
#mcinputform {
max-width: 50%;
display: block;
text-align: center;
}<div id="signupform" style="background-color: lightgrey;">
<center>
<h3 class="email-sign-up-headline">Subscribe to the private Money Nest newsletter</h3>
</center>
<form action="https://moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&id=33b662ad0d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<center><input type="email" value="" name="EMAIL" class="email" id="mcinputform" placeholder="email address" required></center><input id="group_8" style="display: none;" checked="checked" name="group[12353][32]" type="checkbox" value="1" />
<!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
<div class="clear">
<center><input type="submit" value="Subscribe" name="subscribe" id="mcsignupbutton"></center>
</div>
</div>
</form>
</div>