Bootstrap 3 CSS issues

As per SO question.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://fonts.googleapis.com/css?family=Merriweather:400,700|Merriweather+Sans:800,400"></script>
           
    <div class="container">
      <div class="row clearfix">
        <div class="col-md-6 column nofloat">
          <form class="form-horizontal" role="form">
            <legend>Input area</legend>
            <!-- form -->
          </form>
        </div> <!--//.col-md-6-->
        <div class="col-md-6 column nofloat grey-right">
          <div class="preview-container">
          <h2 class="pull-right">hCard Preview</h2>
            <div class="vcard"> 
              <div class="clearfix"></div>
              <div class="col-md-12 blue-heading">
                <span class="fn n">
                  <span class="given-name">John</span>
                  <span class="family-name">Doe</span> 
                </span>       
              </div>
              <div class="col-md-12">
                <div class="data-title">Email <span class="data-input email">john@doe.com</span></div>
              </div>
              <div class="col-md-12">
                <div class="data-title">Phone <span class="data-input tel">555-5555</span></div>
              </div>
              <div class="col-md-12">
                <div class="data-title">Address <div class="data-input adr"><span class="street-address">1 fifth ave</span></div></div>
              </div>
              <div class="col-md-12">
                <div class="data-title"><span class="data-input address-two">new york <span class="region">NY</span></span></div>
              </div>
              <div class="col-md-6">
                <div class="data-title low-margin">Zip <span class="data-input postal-code">60056</span></div>
              </div>
              <div class="col-md-6">
      ...

CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.row {
    height: 100%;
    display: table-row;
}
.nofloat {
    display: table-cell;
    float: none;
    padding: 0 40px;
}
.left-align {
    padding-left: 0;
    height: 20px;
}
h1 {
    font-size: 28px;
    font-family: 'Merriweather Sans', sans-serif;
    color: #2c3e50;
    font-weight: 800;
    margin: 40px 0 0;
}
h2 {
    font-size: 16px;
    font-family: 'Merriweather Sans', sans-serif;
    color: #95a5a6;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0 0 20px;
}
legend {
    color: #b0b8bc;
    font-size: 10px;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 30px;
}
label {
    color: #2c3e50;
    font-size: 12px;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}
.form-control {
    font-size: 16px;
    font-family: 'Merriweather', sans-serif;
    color: #000000;
}
.grey-right {
    background: #eeeeee;
    position: relative;
}
.data-title.low-margin {
    margin-top: 10px;
}
.preview-container {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 60%;
    width: 43%;
    margin: auto;
}
.vcard {
    background: #ffffff;
    float: left;
    width: 100%;
    border-bottom: 2px solid #9a9a9a;
}
.blue-heading {
    background: #2c3e50;
    font-size: 24px;
    font-family: 'Merriweather', sans-serif;
    font-weight: 700;
    color: #ffffff;
    min-height: 70px;
    line-height: 70px;
    margin-bottom: 30px;
}
.data-title {
    color: #34495e;
    font-family: 'Merriweather Sans',sans-serif;
    font-size: 10px;
    font-weight: 400;
    margin-top: 5px;
    text-transform: uppercase;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
   ...