Mailchimp Custom Form CSS - html

Question

I have created a MailChimp form for the footer of my website, I have modified the CSS with a bit of help to get it looking how it does now. I've become stuck now I attached two images the first one is how I want the form to look and the second one is what the current code makes it look like.
Some help to point me in the right direction would be greatly appreciated.
<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—>
.mc4wp-form .input {
margin: 10px 0;
float: left;
width: 100%;
line-height: 25px;
border: 1px solid #000;
border-radius: 10px;
}
.mc4wp-form .input:focus,
.mc4wp-form .button:focus {
outline: none;
}
.mc4wp-form .button {
color:#ffffff;
margin-top: 34px;
display: block;
width: 100%;
background: #2451f4;
height: 30px;
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;
}
.mc4wp-form .button:hover {
cursor: pointer;
background: #000;
color: #fff;
}
.mc4wp-form {
width: 100%;
max-width: 470px;
}
.mc4wp-form .mc-field-group label {
display: block;
font-size: 22px;
}
.mc4wp-form .row {
display: block;
float: left;
width: 100%;
}
.mc4wp-form .col-lg-6,
.mc4wp-form .col-lg-8,
.mc4wp-form .col-lg-4 {
float: left;
padding: 12px;
box-sizing: border-box;
}
.mc4wp-form .col-lg-6 {
width: 50%;
}
.mc4wp-form .col-lg-8 {
width: 80%;
}
.mc4wp-form .col-lg-4 {
width: 20%;
}

Answer 1

The "Email Address" label has a class of "label" while the other labels do not. Simply delete this class and it will look like the other two.
Find this line:
<label for="mce-EMAIL" class="label">Email Address:</label>
Change it to this:
<label for="mce-EMAIL">Email Address:</label>
Where to find it:
<form action="https://www.kayakinguk.com/" method="post"><div class="mc-field-group col-lg-6">
<label for="mce-FNAME">First Name:</label>
<input type="text" id="mce-FNAME" class="input required" name="FNAME" value="">
</div>
<div class="mc-field-group col-lg-6">
<label for="mce-LNAME">Last Name:</label>
<input type="text" id="mce-LNAME" class="input required" name="LNAME" value="">
</div>
<div class="mc-field-group col-lg-8">
<label for="mce-EMAIL" class="label">Email Address:</label>
<input type="email" id="mce-EMAIL" class="required input email" name="EMAIL" value="">
</div>
The .label class that's changing its background color and font properties is a preset found in bootstrap.css on line 5494 in case you're curious.