Bootsrap col collapse 768px, menu collapse at 767px?

My website uses twitter-bootstrap-3 and has a 2 column layout (col-sm-9 and col-sm-3).

col-sm-9 contains my blog and col-sm-3 contains a sidebar nav.

For some strange reason the nav bar collapses at 767px, while the blog container collapses at 768px.

This means when I have the viewport at exactly 768px, the menu looks terrible.

Is this a bug of some sort and can someone help me resolve this?

<div class="col-sm-9 tutorial-panel">
    <section>
      This is my blog content 
    </section>


    <nav class = "col-sm-3 navbar-default">
       <div class = "navbar-header">
          <button type = "button" class = "navbar-toggle" 
             data-toggle = "collapse" data-target = "#example-navbar-collapse">
             <span class = "sr-only">Toggle navigation</span>
             <span class = "icon-bar"></span>
             <span class = "icon-bar"></span>
             <span class = "icon-bar"></span>
          </button>
       </div>

       <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
        <ul class="clearfix">
          <li>item 1</li>
          <li>item 2</li>
          <li> item 3</li>
        </ul>
       </div>
     </nav>