Full Width Tabs using Bootstrap - Fixed with help from Stackoverflow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="tabbable full-width-tabs">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-one" data-toggle="tab">Tabheader 1</a></li>
        <li><a href="#tab-two" data-toggle="tab">Tab 2</a></li>
        
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab-one">
            I'm in Tab 1.
        </div>
        <div class="tab-pane" id="tab-two">
            Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. 
        </div>  
        <div class="tab-pane" id="tab-three">
            Tabbadabba three. 
        </div> 
    </div> 
</div> <!-- /tabbable -->

CSS

.full-width-tabs > ul.nav.nav-tabs {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.nav-tabs{
  margin-bottom: 0px;
}
.tab-content{
  padding: 10px;
  border: 1px solid #DDD;
  border-top: none;
}
.full-width-tabs > ul.nav.nav-tabs{
  border: none;
}
.full-width-tabs > ul.nav.nav-tabs > li > a{
  border: 1px solid #DDD;
}
.full-width-tabs > ul.nav.nav-tabs > li.active > a{
  border-bottom: none;
}
.full-width-tabs > ul.nav.nav-tabs > li {
    float: none;
    display: table-cell;
    width: 100%; /* added this line */
}
.full-width-tabs > ul.nav.nav-tabs > li > a {
    text-align: center;
}