Mailchimp Custom Form CSS

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%;
}