Control Panel

Control Panel allignment issue

by srose

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="row row-content">
    <div class="col-xs-12">
      <h3>Control Panel</h3>
  </div>
  <div class="col-xs-12 col-sm-9">
    <form class="form-horizontal" id="control-panel" name="control-panel" role="form">
      <div class="form-group">
        <label class="col-sm-2 control-label">Status</label>
        <div class="col-sm-9">
          <div id="statusSelector" class="btn-group" data-toggle="buttons">
            <label id="btnEnabled" class="btn btn-success active disabled">
              <input type="radio" name="options" id="option1" autocomplete="off"> Enabled
            </label>
            <label id="btnDisabled" class="btn btn-danger">
              <input type="radio" name="options" id="option2" autocomplete="off"> Disabled
            </label>

          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">Mode</label>
          <div class="col-sm-9">
            <label class="radio-inline">
              <input name="RadioOptions" type="radio" value="option1" checked="checked">Option 1
            </label>
            <label class="radio-inline">
              <input name="RadioOptions" type="radio" value="option2">Option 2
            </label>
          </div>
        </div>
        </form>
      </div>
  </div>

CSS

.row-header {
  margin: 0px auto;
  padding: 0px 0px;
}
.row-content {
  margin: 0px auto;
  padding: 50px 0px;
  border-bottom: 1px ridge;
  min-height: 400px;
}


body {
  align: center;
  padding: 50px 0px 0px 0px;
  z-index: 0;
}
.tab-content {
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  padding: 10px;
}
.affix {
  top: 100px;
}