title: Mailchimp Custom Form CSS
body: <p>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.</p>
  
  <p>Some help to point me in the right direction would be greatly appreciated.</p>
  
  <p><img src="https://i.stack.imgur.com/S0Gc4.jpg" alt="What I want the form to look like"> </p>
  
  <p><img src="https://i.stack.imgur.com/9TsBb.png" alt="What the form code producess"></p>
  
  <pre><code>    &lt;div class="row"&gt;
      &lt;div class="mc-field-group col-lg-6"&gt;
          &lt;label for="mce-FNAME"&gt;First Name:&lt;span class="asterisk"&gt;&lt;/span&gt;&lt;/label&gt;
          &lt;input type="text" value="" name="FNAME" class="input required" id="mce-FNAME"&gt;
      &lt;/div&gt;
      &lt;div class="mc-field-group col-lg-6"&gt;
          &lt;label for="mce-LNAME"&gt;Last Name:&lt;span class="asterisk"&gt;&lt;/span&gt;&lt;/label&gt;
          &lt;input type="text" value="" name="LNAME" class="input required" id="mce-LNAME"&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!--row--&gt;
  
  
  &lt;div class="row"&gt;
  
      &lt;div class="mc-field-group col-lg-8"&gt;
          &lt;label class="label" for="mce-EMAIL"&gt;Email Address&lt;span class="asterisk"&gt;&lt;/span&gt;&lt;/label&gt;
          &lt;input type="email" value="" name="EMAIL" class="required input email" id="mce-EMAIL"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-lg-4"&gt;
          &lt;input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button"&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;&lt;!--row—&gt;
  
  
      .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%;
  }
  </code></pre>