<div id="checkOut">
  <h1>Checkout</h1>
  <h4>Payment Details</h4>
  <form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="cardName">Card Holder Name</label>
      <input type="text" class="form-control" id="cardName" placeholder="Susie Que">
    </div>
    <div class="form-group col-md-6">
      <label for="cardNum">Card Number</label>
      <input type="password" class="form-control" id="cardNum" placeholder="1234567890098765">
    </div>
  </div>
    <div class="form-row">
  <div class="form-group col-md-4">
    <label for="endDate">Expiration Date: Month</label>
    <select id="endDate" class="form-control">
      <option selected>01</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
    </select>
      </div>
    <div class="form-group col-md-4">
      <label for="endDate">Year</label>
    <select id="endDate" class="form-control">
      <option selected>2018</option>
      <option>2019</option>
      <option>2020</option>
      <option>2021</option>
      <option>2022</option>
    </select>
  </div>
  
    <div class="form-group col-md-4">
      <label for="cVV">CVV</label>
      <input type="text" class="form-control" id="cVV" placeholder="123">
    </div>
  </div>
 
  <button class="btn btn-primary">submit</button>
</form>
</div>

@import url('https://fonts.googleapis.com/css?family=IM+Fell+French+Canon+SC|Josefin+Sans');

body {
  background-color: #0066cc;
}

#checkOut {
  background-color: #b3daff;
  margin: 3% 15% 3% 15%;
  border: 1px solid #000;
  padding: 2%;
  box-shadow: 5px 10px 20px;
  overflow: hidden;
}

h1, h4 {
  font-family: 'IM Fell French Canon SC', serif;
  text-align: center;
  padding-bottom: 1%;
}

button {
  float: right;
  font-family: 'Josefin Sans', sans-serif;
}

form {
  font-family: 'Josefin Sans', sans-serif;
}