Mail Chimp Custom Form - css

Question

I am new to this, I am trying to create a custom mail chimp sign up form.
I want it to look like this http://imgur.com/YbwSzA2
I have started coding the form
#mce-FNAME {
margin: 10px;
float: left;
width: 50%;
}
#mce-LNAME {
margin: 10px;
float: left;
width: 50%;
}
#mce-email {
float: left;
margin: 10px;
width: 80%;
}
#mc_embed_signup .button {
width:20%;
float:left;
}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//kayakinguk.us8.list-manage.com/subscribe/post?u=f3759cd613780ba95cc76028b&id=0f3ca35b8b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our newsletter</h2>
<div class="indicates-required"><span class="asterisk"></span></div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk"></span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name <span class="asterisk"></span>
</label>
<input type="text" value="" name="LNAME" class="required" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk"></span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</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;"><input type="text" name="b_f3759cd613780ba95cc76028b_0f3ca35b8b" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
If anyone has any suggestions or changes, that would be great.

Answer 1

Took the liberty to modify your code and selectors, if you have any questions, feel free to ask but it's pretty much self explanatory.
PS: Advice, use classes for styling css and reserve ID's for JavaScript
.input {
margin: 10px 0;
float: left;
width: 100%;
line-height: 25px;
border: 4px solid #000;
border-radius: 10px;
}
.input:focus,
.button:focus {
outline: none;
}
.button {
margin-top: 34px;
display: block;
width: 100%;
background: transparent;
border: 4px solid #000;
padding: 4px;
height: 35px;
font-size: 15px;
border-radius: 10px;
outline: none;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.button:hover {
cursor: pointer;
background: #000;
color: #fff;
}
.mc_embed_signup {
width: 100%;
max-width: 580px;
}
.mc-field-group label {
display: block;
font-size: 22px;
}
.row {
display: block;
float: left;
width: 100%;
}
.col-lg-6,
.col-lg-8,
.col-lg-4 {
float: left;
padding: 12px;
box-sizing: border-box;
}
.col-lg-6 {
width: 50%;
}
.col-lg-8 {
width: 80%;
}
.col-lg-4 {
width: 20%;
}
<div id="mc_embed_signup" class="mc_embed_signup">
<form action="//kayakinguk.us8.list-manage.com/subscribe/post?u=f3759cd613780ba95cc76028b&id=0f3ca35b8b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our newsletter</h2>
<div class="row">
<div class="mc-field-group col-lg-6">
<label for="mce-FNAME">First Name:<span class="asterisk"></span></label>
<input type="text" value="" name="FNAME" class="input required" id="mce-FNAME">
</div>
<div class="mc-field-group col-lg-6">
<label for="mce-LNAME">Last Name:<span class="asterisk"></span></label>
<input type="text" value="" name="LNAME" class="input required" id="mce-LNAME">
</div>
</div><!--row-->
<div class="row">
<div class="mc-field-group col-lg-8">
<label class="label" for="mce-EMAIL">Email Address<span class="asterisk"></span></label>
<input type="email" value="" name="EMAIL" class="required input email" id="mce-EMAIL">
</div>
<div class="col-lg-4">
<input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div><!--row-->
<div class="row" class="hidden">
<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>
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_f3759cd613780ba95cc76028b_0f3ca35b8b" tabindex="-1" value="">
</div>
</div><!--row-->
</div><!--mc_embed_signup_scroll-->
</form>
</div><!--mc_embed_signup-->
Result:
Good Luck,
Michel