サイドバーの位置はブートストラップ

Question

私はヘッダーのナビゲーションバーとサイドナビゲーションバーの垂直メニューを持っています。私は左に浮かぶように近い私のナビゲーションバーの位置を修正することができませんでした。それはいくつかのギャップを持っている、私は何かがまだ欠けている位置を調整しようとしました。参照のための画像を参照してください

サイドナビゲーションバーの位置のために、私は他のメニューも含めて、もしうまくいきません。

<title>Bootstrap Case</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 






<nav class="navbar top-color"> 
    <!--nav header Div--> 
    <div class="container-fluid"> 
     <div class="col-sm-1"><a class="navbar-head" style="text-decoration:none; color:white;" href="#"><h1>Bootstrap Case</h1></a> 
     </div> 


    </div> 


    </nav> 




<nav class="navbar navbar-inverse verticalmenu" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Main Menu</a> 
     <br><br> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#/dashboard"><span class="glyphicon glyphicon-dashboard vmenu"></span> Dashboard</a> 
     </li> 
     <li class="active"><a href="#/"><span class="glyphicon glyphicon-user vmenu"></span> Profile</a> 
     </li> 
     <li><a href="#/skilltest"><span class="glyphicon glyphicon-edit vmenu"></span>Skill Test</a> 
     </li> 
     <li><a href="#/interviews"><span class="glyphicon glyphicon-tags vmenu"></span>Interviews</a> 
     </li> 
     <li><a href="#/login"><span class="glyphicon glyphicon-off vmenu"></span>Logout</a> 
     </li> 
    </ul> 

    </div>a 
    <!-- /.navbar-collapse --> 
</nav> 

CSS：

<style> 
.top-color { 
     background-color: aquamarine; 
     margin-bottom: 0; 
    } 
    .firstmenu { 
     margin-bottom: 0; 
    } 



@media (min-width: 768px) { 


      .top-color{ 
     width:100%; 
     margin: 0; 
     height:5em; 
     padding-top:10px; 
     text-align: center; 
     background: #3399ff; 
     padding-bottom: 30px; 

    } 
     .firstmenu .navbar-brand { 
     padding-left:155px; 
    } 
     .firstmenu li{ 
     padding-left:50px; 


    } 


     .firstmenu .active{ 
      width:250px; 


     } 

     select { 
     -webkit-appearance: none; 
     -moz-appearance: none; 
     appearance: none; 
     } 


    .verticalmenu .navbar-toggle { 
    display: none ; 
} 
.navbar.verticalmenu { 
    float: left; 
    width: 200px; 
    height: 100%; 
    } 
.verticalmenu .collapse.navbar-collapse.navbar-ex1-collapse { 
    display: block; 
    float: left; 

} 
    .verticalmenu .active { 
      width:200px; 

     } 


    .verticalmenu .navbar-collapse { 
     height: auto; 
     border-top: 0; 
     box-shadow: none; 
     max-height: none; 
     padding-left: 0; 
     padding-right: 0; 
     } 
    .verticalmenu .navbar-collapse.collapse { 
     display: block !important; 
     width: auto !important; 
     padding-bottom: 0; 
     overflow: visible !important; 
     } 
    .verticalmenu .navbar-collapse.in { 
     overflow-x: visible; 
     } 
    .verticalmenu .navbar { 
     max-width: 100px; 
     margin-right: 0; 
     margin-left: 0; 
     } 
    .verticalmenu .navbar-nav, 
     .verticalmenu .navbar-nav > li, 
    .verticalmenu .navbar-left, 
    .verticalmenu .navbar-right, 
    .verticalmenu .navbar-header { 
     float: none !important; 
     } 
    .verticalmenu .navbar-right .dropdown-menu { 
     left: 0; 
     right: auto; 
     } 
    .verticalmenu .navbar-collapse .navbar-nav.navbar-right:last-child { 
     margin-right: 0; 
     } 

    .vmenu{ 
      text-align: center; 
     } 
    } 
</style> 

Answer 1

変化以下セレクタ

.navbar.verticalmenu { 
    width: 200px; 
    height: 100%; 
    } 

Answer 2

は.verticalmenu .navbar-headerからfloat:noneを削除します。