css div佔用整個屏幕

I have the following fiddle當你運行它顯示一個紅色的邊框，表明我的div是有問題的。 真的，我希望我的div位於它的左右兩側的2個div之下。css div佔用整個屏幕

div的問題是這樣的：

<div id="Tabs" role="tabpanel" style=" position:relative; width:100%; border:1px solid red;"> 
     <!-- Nav tabs --> 
     <ul class="nav nav-tabs" role="tablist"> 
      <li class="active"><a href="#sqlOutput" aria-controls="sqlOutput" role="tab" data-toggle="tab">"U or R" Table Scripts</a></li> 
      <li><a href="#sqlCRUD" aria-controls="sqlCRUD" role="tab" data-toggle="tab">"U or R" Table CRUD</a></li> 
      <li><a href="#sqlETable" aria-controls="sqlETable" role="tab" data-toggle="tab">"E" Table Scripts</a></li> 
      <li><a href="#xTableInserts" aria-controls="xtablecrud" role="tab" data-toggle="tab">"X" Table Scripts</a></li> 
      <li><a href="#JSONDATA" aria-controls="JSONDATA" role="tab" data-toggle="tab">JSON DATA</a></li> 
     </ul> 

     <!-- Tab panes --> 
     <div class="tab-content" style="padding-top: 20px; overflow:auto;"> 
      <div role="tabpanel" class="tab-pane active" id="sqlOutput" ng-bind-html="sqlOutput | unsafe" style="height:200px; overflow:auto;"></div> 
      <div role="tabpanel" class="tab-pane" id="sqlCRUD" ng-bind-html="sqlCRUD | unsafe" style="height:200px; overflow:auto;"></div> 
      <div role="tabpanel" class="tab-pane active" id="sqlETable" ng-bind-html="sqlETable | unsafe" style="height:200px; overflow:auto;"></div> 
      <div role="tabpanel" class="tab-pane active" id="xTableInserts" ng-bind-html="xTableInserts | unsafe" style="height:200px; overflow:auto;"></div> 
      <div role="tabpanel" class="tab-pane active" id="JSONDATA" ng-bind-html="JSONDATA | unsafe" style="height:200px; overflow:auto;"></div> 
     </div> 
    </div>

請我需要改變指教？您可能會注意到我的小提琴中存在重複的身體指示。我有dashboard.css（引導主題）和bootstrap.css組合在那裏。

來源

2016-02-11 webdad3

你能更具體什麼div嗎？另外爲什麼在小提琴中有這麼多的CSS？如果你在外部鏈接到引導CSS，並且只有**你的**在小提琴中添加了CSS，那會更好。 – 2016-02-11 22:21:14

在小提琴中是紅色的邊框。問題中的div是什麼。 – webdad3