Eu tenho um div div com vários filhos divs dentro disso. A div pai tem uma cor de plano de fundo, no entanto, isso não parece se estender até o último par de divs filhos. Por favor, veja o código abaixo:

http://codepen.io/tombarton/pen/aNaGGa

<div class="container">
    <ul>
        <li>
            ...
        </li>
    </ul>
    <hr>
    <div class="checkout">
        <div class="left">
                          ...
        </div>
        <div class="right">
            <div class="button">
                                ...
            </div>
        </div>
    </div>
</div>

CSS

body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
}

.container {
  display: block;
  max-width: 600px;
  height: 100%;
  margin: 20vh auto;
  padding: 0 3%;
  background-color: white;
  text-align: justify;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  position: relative;
  list-style-type: none;
  margin: 20px auto;
}

.checkout {
  display: block;
  margin-top: 10px;
  width: 50%;
  float: right;
}

.left {
  display: block;
  width: 55%;
  float: left;
  line-height: 40px;
  text-align: right;
}

.right {
  display: block;
  width: 40%;
  margin: auto;
  float: right;
  cursor: pointer;
}

Acho que isso se deve ao fato de as duas divs finais não terem conteúdo, mas não tenho 100% de certeza. Alguém tem alguma idéia?

Obrigado.