html - Make fixed contents of column not span entire page width -

i've created plunkr show issue.

i have following layout have menu on left , page contents on right. i'd fix menu so, if page contents result in vertical scrolling, menu not move.

<div class="container-fluid">   <div class="row">     <div class="col-sm-2">       <div class="main-nav">         <!--menu here-->       </div>     </div>     <div class="col-sm-10">       <!--page contents here-->     </div>   </div> </div> 

with following css:

.main-nav {   position: fixed;   left: 0;   right: 0;   z-index: 1; } 

the menu has links i'd take width of col-sm-2 in, when position: fixed applied, takes entire page width.

by setting .main-nav right:0; left:0; you're making span entire width. if remove these lines (you can set top:0; left:0; if want safe menu position) should work way want.

.main-nav {    position: fixed;    z-index: 1;    width:inherit;    /*optional current code*/    top:0;    left:0; } 

edit: setting width of .main-nav inherit span entire width of col.-m-2