Bootstrap 2.3.2 - responsive forms

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="container-one" align="center">
<div id="container-two">

    <div class="container-two-left" align="center">
    </div>

    <div class="container-two-right" align="center">
    </div>
        <div class="container-two-left" align="center">
    </div>

    <div class="container-two-right" align="center">
    </div>
        <div class="container-two-left" align="center">
    </div>

    <div class="container-two-right" align="center">
    </div>
        <div class="container-two-left" align="center">
    </div>

    <div class="container-two-right" align="center">
    </div>

</div>

CSS

#container-one{width: 100%; height: 1200px; background-color: lightblue;}
#container-two{width: 800px; height: calc(100% - 6px); border-style: solid; border-color: red;}
.container-two-left{width: calc(50% - 6px); height: 50px; border-style: solid; border-color: green; float: left; margin-top: 10px;}
.container-two-right{width: calc(50% - 6px); height: 50px; border-style: solid; border-color: orange; float: left; margin-top: 10px;}

@media (max-width: 900px){
    #container-two{width: calc(100% - 12px);}
}
@media (max-width: 600px){
    .container-two-left{width: calc(100% - 6px);}
    .container-two-right{width: calc(100% - 6px)}
    
}