When trying to set the width of a div tag to 100% within a bootstrap grid system (col-lg-3), I noticed that the div ends up taking the full width of the browser instead of just 100% of its parent(col-lg-3).
.sidebar {
color: #fff;
font-weight: bold;
font-size: 18px;
background-color: green;
}
.wrapping {
width: 100%;
padding-left: 32px;
position: fixed;
background-color: red;
}<div class="row">
<div class="sidebar col-lg-3">
<div class="wrapping">
<a href="javascript:void(0)" class="close_menu">Close Menu</a>
<div>
<h3>Company</br>Name</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Showcase</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Designers</a></li>
<li><a href="#">Packages</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="main col-lg-9"></div>
</div>