如何使用固定侧边栏居中布局？

Question

我需要一个居中的布局，在容器的左侧有一个垂直的固定菜单，使用bootstrap 3.在小屏幕上，菜单将从左侧插入。 我有一个带有侧边栏的解决方案，来自某个地方的片段。这样可以正常工作，但布局不居中（菜单和内容应该在通常的引导容器中居中）。如果我使用容器div作为整个事物的包装器，菜单将不再被修复。

HTML：

 var provider = new firebase.auth.FacebookAuthProvider();
 firebase.auth().currentUser.linkWithPopup(provider)

CSS：

<div class="navbar navbar-fixed-top visible-xs">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle"></button>
    </div>
</div>
<div class="row-offcanvas row-offcanvas-left">
    <div id="sidebar" class="sidebar-offcanvas col-sm-4">
        <div class="col-md-12">
            <ul class="nav">
                <li><a href="#">link</a></li>
            </ul>
        </div>
    </div>
    <main class="col-sm-8">Long long text</main>
</div>

我准备了fiddle。