Split Centered Columns

HTML

<div class="container">
    <div class="title row">
        <h1>Split centered columns</h1>
    </div>
    <div class="row">
        <div class="left half">
            <div class="box">123123123123123123</br>112312312312312323123</div>           
        </div>
        <div class="right half">
            <div class="box">2</div>
        </div>
    </div>
    <div class="row">
        <div class="left half">
            <div class="box">3</div>           
        </div>
        <div class="right half">
            <div class="box">4</div>
        </div>
    </div>
    <div class="row">
        <div class="left half">
            <div class="box">5</div>           
        </div>
        <div class="right half">
            <div class="box">6</div>
        </div>
    </div>
    </div>

CSS

.container {
    background-color:#F8F8F8;
    width:80%;
    margin:0 auto;
}
.row {
    background-color:#EEE;
    margin-top:20px;

    width:100%;
    overflow:auto;
}
.title {
    background-color:red;
    margin-top:0px;
    padding:4px 0px;
}
.half {
    width:50%;
}
.left {
    float:left;
}
.right {
    float:right;
}
.box {
    color:white;
    background-color:#0C8945;
    width:80%;
    margin:0 auto;
    padding:10px 0px;
    padding-left:10px;
}