How can I use the sidebar in a webpage that doesn't fill the whole screen?

[martinvol]

If i take the demo and I try to apply a width to .container-fluid so it doesn't use the whole screen, the sidebar and the main content overlap.

How can I prevent this? See a screenshot: http://i.imgur.com/JGYRfPR.png

[Zhythero]

Use an inline styling to the col-* container of the navbar with z-index

Example (on my case):

 <div class="col-sm-3 col-lg-2" style="z-index: 2">
   <!-- navbar here -->
 </div>
 <div class="col-sm-9 col-lg-10">
   <!-- content here -->
 </div>

[martinvol]

@Zhastreaus But I think that doesn't solve the overlapping, it just states what div should be on top of what, right?

[Zhythero]

@martinvol Oh, so you want to shrink both elements instead of them being overlapped. Hmm, I currently don't know how to solve this because I was contented with z-index.

let's just wait for another one to have a solution for this