边栏菜单引导列li不占用父容器的宽度

Question

重新编辑问题

在下面的代码中，我有我想要的所需布局，除了一件事。 我的li标签突出了aqua。我做了这个，所以我可以监视它，而我会在codepen中编辑css，直到我得到我想要的。还是没想出来。我希望hightlighted li标签占据其所在容器宽度的100％。我希望它们可以叠放在彼此之上，这样当它悬停在它们上面时看起来很干净，就像你在大多数仪表板中看到的那样。列周围的填充物来自内置于自举网格系统的排水沟。我为它分配了no-gutters课程，认为这会对我有所帮助。还是不行。容器流体是唯一可能导致嵌套在li中的aside标签由于填充而能够在宽度上达到100％的唯一因素吗？

.side-menu {

    background:#0C1E1D;
    color: #fff;
    padding-top:1%;
    height: 100vh;
    width: 100%;

}

.profile-pic {
    height: 150px;
    width: 150px;
    margin: auto;
}

.btn {
    background:#424242;
    display: block;
    margin: auto;
    transition:
}

.list {
  margin:0;
  padding:0;
}

.list li {
    width:100%;
    margin-top: 10%;
    transition: 1s;
    overflow: auto;
    background:aqua;

}

.list li:hover {

    cursor: pointer;

}

.content {
    background: #f6f6f6;
    height: 100vh;
}

<div class="container-fluid">  
    <div class="row no-gutters">
        <aside class="side-menu col-md-2  text-center">
            <img src="https://cdn.bandmix.com/bandmix_us/media/1049/1049150/1119049-p.jpg" class="img-circle img-responsive profile-pic"   alt="profile-pic "/>
            <h4 class="text-center">Steven Sanders</h4>
            <button class="btn btn-large text-center"><span class="glyphicon glyphicon-envelope"></span> Message</button>
            <ul class="list list-unstyled">
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
            </ul>
        </aside>
        <main class="col-md-10 content">
            <h1 class="text-center">Dashboard</h1>      
        </main>
    </div>
</div>