html - 引导布局 : Content not filling browser

Question

我有一个带有侧边栏的管理屏幕。除了主要内容没有填满浏览器宽度外，一切都很好。我尝试了很多选择，但我无法解决这个难题。感谢您的帮助和建议

这是我的 HTML

        <!-- top navigation menu element -->
        <div id="wrap">
            <div class="container-fluid">

                <div class="row row-offcanvas row-offcanvas-left">
                    <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation">
                        <ul class="nav nav-sidebar">
                           <li id="departments">
                             <i class="fa fa-fw fa-sitemap"></i> <span>Departments</span>
                           </li>
                           <li id="permissions">
                              <i class="fa fa-fw fa-key"></i> <span>Permissions</span> </a>
                            </li>
                          </ul>
                    </div><!-- .col-sm-3 .col-md-2 .sidebar-offcanvas -->

                    <div class="col-sm-9 col-md-10 main">
                        <!--toggle sidebar button-->
                        <p class="visible-xs">
                            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">
                                <i class="glyphicon glyphicon-chevron-left"></i>
                            </button>
                        </p>

                        <h1 class="page-header inline-page-title">Groups</h1>

                        <!-- main content -->

                    </div><!-- .col-sm-9 .col-md-10 .main -->
                </div> <!-- .row .row-offcanvas .row-offcanvas-left -->
            </div><!-- .container-fluid -->
        </div> <!-- #wrap -->

还有我的 CSS

body {
    padding-top: 50px;
    background-color: #f5f5f5;
}
.main {
  padding: 20px;
  background-color: #fff;
  border-left: 1px solid #dae3e9;
  height: 100%;
  box-shadow: -3px 3px 3px -2px #f1f1f3;
}

.sidebar-offcanvas {
     min-height: 100%;
}

更清晰的图像显示了右侧的间隙 -

Answer 1

发现问题 - 正是这段 CSS 引起了问题。我删除了它并且效果很好 - 但是给我留下了另一个问题。如何在不失去响应特性的情况下限制左侧导航栏的宽度？任何建议表示赞赏。

    @media only screen 
and (min-width : 1200px) {
    .sidebar-offcanvas {
        width: 180px;
    }
}