I have a header with row elements that are filling it completely using the class "col-xs-2". I am trying to fill the color for one specific "col-xs-2" element and center the text within it. However, the color is only filling the "col-xs-2" div. Can someone assist me in achieving the desired effect?
https://i.sstatic.net/cZGPs.png
The elements ABOUT, B1, LEVEL1, etc. each occupy one "col-xs-2" element.
https://i.sstatic.net/kF17O.png
I want the ABOUT div to completely fill the space instead of just half, and I also want to center the text within it.
Here is the code snippet:
<div class="navbar navbar-default navbar-fixed-top text-center">
<div class="container-fluid">
<div class="row">
<div ng-class="page=='about'?'active':''" ng-click="changePage('about')" class="col-xs-2 active">ABOUT</div>
<div ng-class="page=='b1'?'active':''" ng-click="changePage('b1')" class="col-xs-2">B1</div>
<div ng-class="page=='level1'?'active':''" ng-click="changePage('level1')" class="col-xs-2">LEVEL 1</div>
<div ng-class="page=='level3'?'active':''" ng-click="changePage('level3')" class="col-xs-2">LEVEL 3</div>
<div ng-class="page=='level5'?'active':''" ng-click="changePage('level5')" class="col-xs-2">LEVEL 5</div>
<div ng-class="page=='level16'?'active':''" ng-click="changePage('level16')" class="col-xs-2">LEVEL 16</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div ng-if="page == 'about'" ng-include="'./html/about/about.html'"></div>
<div ng-if="page == 'b1'" ng-include="'./html/about/b1.html'"></div>
<div ng-if="page == 'level1'" ng-include="'./html/about/level1.html'"></div>
<div ng-if="page == 'level3'" ng-include="'./html/about/level3.html'"></div>
<div ng-if="page == 'level5'" ng-include="'./html/about/level5.html'"></div>
<div ng-if="page == 'level16'" ng-include="'./html/about/level16.html'"></div>
</div>
</div>
</div>
Main.css
/*Header*/
.navbar-fixed-top{
background: #EBE9DB;
border-bottom: 1px solid lightgrey;
}
.navbar-fixed-top .active{
background: #1AA0DE;
color: white;
}
Current Output: https://i.sstatic.net/Pck6z.png
Expected output: https://i.sstatic.net/fwx2m.png