问浮动2列后出现div故障

EN

 <div class="container"><div class="hinfo"><div class="hleft">Back</div>
  <div class="hright"><h1>Drive Nuts</h1></div>
  </div>
 <div class="info"><div class="left">Call No.</div>
  <div class="right">Datas</div>
  </div>
  <div class="info"><div class="left">Call No.</div>
  <div class="right">Datas</div>
  </div><div class="info"><div class="left end">Call No.</div>
  <div class="right end">Datas</div>
  </div>
  </div>
<div style="clear:both;"></div>
<div class="download"><a href="">Pull now</a></div>

    body {
    background: #34495e;
    padding: 50px 0px;
  }

.end {
    -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.48);
  }

.container {
    background: #ecf0f1;
    min-height: 480px;
    width: 700px;
    margin: 0px auto;
  }

.container h1 {
    margin: 0px;
    padding: 0px;
  }

.right, .left {
    display: inline-block;
    padding: 15px;
    Font-weight: bold;
    font-size: 20px;
    color: #fff;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

.left {
    width: 20%;
    background: #2c3e50;
    border-bottom: 1px solid #34495e;
  }

.right {
    width: 80%;
    background: #16a085;
    border-bottom: 1px solid #1abc9c;
  }

.hright, .hleft {
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

.hleft {
    width: 20%;
    background: #c0392b;
    border-bottom: 1px solid #e74c3c;
    line-height: 100px;
    text-align: center;
  }

.hright {
    width: 80%;
    background: #27ae60;
    border-bottom: 1px solid #2ecc71;
    padding-left: 10px;
    line-height: 100px
  }

.download {
    text-align: center;
 }