Boostrap: cannot horizontally center content inside nested columns - css

Question

http://www.bootply.com/124116
I have two nested columns but I cannot seem to center their contents inside them. If I get rid of the "float: left", then it splits to two lines which I do not want. What do I need to do to center this? Just to be clear I want to center the contents of cas_subboxA and cas_subboxB which I added borders around.
HTML:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Calculator
</div>
<div class="panel-body">
<form id="cas_form">
<div class="row" id="cas_input_row">
<div class="col-md-6" id="cas_subboxA">
<input class="form-control" id="cas_datepicker" type="text" placeholder="mm/dd/yyyy">
<button class="btn btn-default" id="cas_datebutton" type="button">
<i class="glyphicon glyphicon-calendar"></i>
</button>
<div id="cas_radios">
<input name="operation" type="radio" value="plus">plus<br>
<input name="operation" type="radio" value="minus">minus
</div>
</div>
<div class="col-md-6" id="cas_subboxB">
<input name="daystoaddorsubtract" class="form-control" id="cas_text2" type="number" placeholder="#">
<div id="cas_radios">
<input name="cal_or_work" type="radio" value="calendar">calendar days<br>
<input name="cal_or_work" type="radio" value="work">work days
</div>
</div>
</div>
<div>
<div id="cas_buttons">
<button class="btn btn-success" type="submit"><i class="glyphicon glyphicon-ok"></i> Calculate Dates!</button>
<button class="btn btn-default" type="reset"><i class="glyphicon glyphicon-remove"></i> Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS:
#cas_form {
margin-top: 20px;
text-align: center;
}
#cas_input_row {
text-align: center;
}
#cas_datepicker {
width: 110px;
float: left;
}
#cas_datebutton {
float: left;
}
#cas_radios {
float: left;
margin-top: -4px;
margin-left: 20px;
height: 40px;
vertical-align: baseline;
text-align: left;
}
#cas_subboxA, #cas_subboxB {
text-align: center;
border: solid 1px;
}
#cas_text2 {
margin-left: 20px;
width: 70px;
float: left;
text-align: center;
}
#cas_buttons {
margin-top: 20px;
text-align: center;
}

Answer 1

Are you trying to center the content's inside your input fields or the panel-heading or both? Try adding a div .text-center center after your .container that'll center the panel heading. You can center the contents of your fields using .text-align: center on your #cas_datepicker hope this helps.
How do you get centered content using Twitter bootstrap?