Two fixed navigations - how to center block between them

Question

What I want to do is to create two fixed navigation elements (each on the opposite side of the page). I did that, but the problem is; it is not responsive. When I zoom-in or zoom-out, elements mix together.

How can I fix it? Here is the code I have tried so far:

.docTheme {
    margin-top: 20px;
    padding-left: 0;
    margin-left: 10px;
}

.leftNav {  /* add rounded corner */
    position: fixed;

}

.rightNav {
    position: fixed;
    right: 0;
}

.mainContent {
    display: block;
    margin-left: 320px;
    width: 65%;
}

<!-- Content -->
    <div class="container-fluid docTheme" role="main">


      <div class="row">
        <div class="col-sm-3 leftNav">
          <div class="list-group">
            <a href="#" class="list-group-item active">
              Cras justo odio
            </a>
            <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
            <a href="#" class="list-group-item">Morbi leo risus</a>
            <a href="#" class="list-group-item">Porta ac consectetur ac</a>
            <a href="#" class="list-group-item">Vestibulum at eros</a>
          </div>
        </div>
        <div class="col-sm-7 mainContent">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat. Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium. Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolo    
Nam feugiat purus eu velit condimentum rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis eu.

Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea dictumst. Integer euismod mollis metus, nec fermentum ligula suscipit id. Nunc vitae gravida magna. Sed ut urna nunc. Fusce eget fringilla nulla, sed congue odio. Cras bibendum nisi est, quis scelerisque nisl laoreet non. Curabitur mi nibh, hendrerit eu dolor sit amet, egestas convallis nibh. Nam ultricies elit ut tincidunt congue. Aliquam ac dui vel arcu condimentum pharetra. Phasellus porta, sem sed tempus aliquam, urna nisl posuere sem, non auctor nibh risus faucibus turpis. Integer sit amet cursus lectus. Nam hendrerit, nisl sed fringilla volutpat, leo neque fringilla magna, a maximus metus mauris nec urna. Duis nulla dui, dignissim at felis id, tristique laoreet nibh. Pellentesque convallis neque a purus convallis lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat. Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium. Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolor.
        </div>
        <div class="col-sm-2 rightNav">
          <div class="list-group">
            <a href="#" class="list-group-item active">
              Cras justo odio
            </a>
            <a href="#" class="list-group-item">In this chapter</a>
            <a href="#" class="list-group-item">In this chapter</a>
            <a href="#" class="list-group-item">In this chapter</a>
            <a href="#" class="list-group-item">In this chapterros</a>
          </div>

        </div>
      </div>

    </div> <!-- /container -->

Thanks.

Answer 1

I think you need one like this

.docTheme {
  margin-top: 20px;
  padding-left: 0;
  margin-left: 10px;
}
.leftNav {
  /* add rounded corner */
  position: fixed;
  top: 0;
  left: 0;
  width: 33%;
}
.rightNav {
  position: fixed;
  right: 0;
  top: 0;
  width: 33%;
}
.mainContent {
  display: block;
  margin-left: 33%;
  width: 33%;
}

<!-- Content -->
<div class="container-fluid docTheme" role="main">


  <div class="row">
    <div class="col-sm-3 leftNav">
      <div class="list-group">
        <a href="#" class="list-group-item active">
              Cras justo odio
            </a>
        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item">Morbi leo risus</a>
        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item">Vestibulum at eros</a>
      </div>
    </div>
    <div class="col-sm-7 mainContent">

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat.
      Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium.
      Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolo Nam feugiat purus eu velit condimentum
      rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id
      sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis eu. Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea
      dictumst. Integer euismod mollis metus, nec fermentum ligula suscipit id. Nunc vitae gravida magna. Sed ut urna nunc. Fusce eget fringilla nulla, sed congue odio. Cras bibendum nisi est, quis scelerisque nisl laoreet non. Curabitur mi nibh, hendrerit
      eu dolor sit amet, egestas convallis nibh. Nam ultricies elit ut tincidunt congue. Aliquam ac dui vel arcu condimentum pharetra. Phasellus porta, sem sed tempus aliquam, urna nisl posuere sem, non auctor nibh risus faucibus turpis. Integer sit amet
      cursus lectus. Nam hendrerit, nisl sed fringilla volutpat, leo neque fringilla magna, a maximus metus mauris nec urna. Duis nulla dui, dignissim at felis id, tristique laoreet nibh. Pellentesque convallis neque a purus convallis lobortis. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat.
      Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium.
      Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolor.
    </div>
    <div class="col-sm-2 rightNav">
      <div class="list-group">
        <a href="#" class="list-group-item active">
              Cras justo odio
            </a>
        <a href="#" class="list-group-item">In this chapter</a>
        <a href="#" class="list-group-item">In this chapter</a>
        <a href="#" class="list-group-item">In this chapter</a>
        <a href="#" class="list-group-item">In this chapterros</a>
      </div>

    </div>
  </div>

</div>
<!-- /container -->