Bootstrap with Main Left Navbar causes content nav menu to have same vertical size

I have a Bootstrap based site with a navbar vertically aligned on the left of the screen. On some of the pages I want the page content to have its own nav menu place horizontally across the top of its own content.

Problem: My problem is that using bootstrap classes for both navigation menus, the horizontal nav menu in the content area has the same height as the main vertical navigation menu. This pushes all the content not only below the content's nav menu, but below the much taller main navigation menu - when the content should be beside the main menu!

Question: How do I get the content's nav menu to vertically size for its own content so the content area's full content will flow beside the main navigation menu?

Using the [F12] developer tools in IE, FireFox, and Chrome, I cannot see any reason why the heights of both navigation menus is synchronized, and thus I can find no why to break that synchronization.

The problem is replicable on JSFiddle: https://jsfiddle.net/zazm460q/2/ (I am developing for desktop apps, you may have to widen the Result pane to see the desktop layout rather than the mobile layout.)

Here is some simplified HTML showing the problem:

<div class="navbar navbar-inverse nabvar-static-top">
  <div class="navbar-brand">
    <a href="#">My App Logo</a>
  </div>
</div>
<nav class="navbar-left navbar-inverse">
  <ul class="nav nav-pill nav-stacked" id="main-nav">
    <li class="panel">
      <a href="#" data-toggle="collapse" data-target="#a" data-parent="#main-nav">menu item a</a>
      <ul id="a" class="nav nav-pills nav-stacked collapse in">
        <li>
          <a href="#">a.1</a>
        </li>
        <li>
          <a href="#">a.2</a>
        </li>
        <li>
          <a href="#">a.3</a>
        </li>
      </ul>
    </li>
    <li class="panel">
      <a href="#" data-toggle="collapse" data-target="#a" data-parent="#main-nav">menu item b</a>
      <ul id="b" class="nav nav-pills nav-stacked collapse">
        <li>
          <a href="#">b.1</a>
        </li>
        <li>
          <a href="#">b.2</a>
        </li>
        <li>
          <a href="#">b.3</a>
        </li>
      </ul>
    </li>
    <li class="panel">
      <a href="#" data-toggle="collapse" data-target="#a" data-parent="#main-nav">menu item c</a>
      <ul id="c" class="nav nav-pills nav-stacked collapse">
        <li>
          <a href="#">c.1</a>
        </li>
        <li>
          <a href="#">c.2</a>
        </li>
        <li>
          <a href="#">c.3</a>
        </li>
      </ul>
    </li>
    <li class="panel">
      <a href="#" data-toggle="collapse" data-target="#a" data-parent="#main-nav">menu item d</a>
      <ul id="d" class="nav nav-pills nav-stacked collapse">
        <li>
          <a href="#">d.1</a>
        </li>
        <li>
          <a href="#">d.2</a>
        </li>
        <li>
          <a href="#">d.3</a>
        </li>
      </ul>
    </li>
    <li class="panel">
      <a href="#" data-toggle="collapse" data-target="#a" data-parent="#main-nav">menu item e</a>
      <ul id="e" class="nav nav-pills nav-stacked collapse">
        <li>
          <a href="#">e.1</a>
        </li>
        <li>
          <a href="#">e.2</a>
        </li>
        <li>
          <a href="#">e.3</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
<div id="body-content">
  <div class="container">
    <nav class="navbar-inner">
      <ul class="nav nav-tabs">
        <li><a data-toggle="tab" href="#tab-a">Tab A</a></li>
        <li><a data-toggle="tab" href="#tab-b">Tab B</a></li>
        <li class="active"><a data-toggle="tab" href="#tab-c">Tab C</a></li>
        <li><a data-toggle="tab" href="#tab-d">Tab D</a></li>
      </ul>
    </nav>
    <div class="tab-content">
      <div class="tab-pane" id="tab-a">Tab-A Content Here
        <p>
          AAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA
        </p>
      </div>
      <div class="tab-pane" id="tab-b">
        <h1>Tab-B Content Here</h1>
        <p>
          BBBBBBBBBBBBBB BBBBBBBBBB BBBBBBBBBBB BBBBBBBBB
        </p>
      </div>
      <div class="tab-pane active" id="tab-c">
        <h2>Tab-C Content Here</h2>
        <p>
          cccccc ccccccCCCCCCC CCCCCcccccc cccCCCCCCCCC CCCCCCCCcccc cccccc
        </p>
      </div>
      <div class="tab-pane" id="tab-d">
        <h3>Tab-D Content Here</h3>
        <p>
          DDDDDDDDDDD ddddddddddddd DDDDDDDDDDDDD ddddddddddd DDDDDDDDddd
        </p>
      </div>
    </div>
  </div>
</div>
<footer>My App</footer>

And also some simplified CSS:

nav.navbar-left {
  width: 140px;
}

#body-content {
  margin-left: 150px;
}

footer {
  width: 100%;
  text-align: center;
}