Unable to create another box in a column - html

Question

Bootstrap Code: http://www.bootply.com/rKAlUVLSTA
I'm trying to create a box below the left sidebar but whatever I do, it is always in the white background zone. I do understand that if i add the "leftbar" class elsewhere, it will work but the width has to remain same as the logo background.
Screenshot:

Answer 1

Here is the solution: http://www.bootply.com/rw2brhxWy7 Basically what you had to do is split up the two into two separate columns within a parent column. I added a margin-top: 20px to be able to distinguish the two.
Relevant code below:
<div class="col-md-2">
<div class="col-md-12 leftbar" style="margin-top:50px;">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div><!--/.navbar-header -->
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<div class="text-center">
<p>John Doe</p>
<p>Points</p>
</div>
<ul class="nav navbar-nav sidebar-nav">
<li><span class="glyphicon glyphicon-dashboard"></span> Dashboard</li>
<li><span class="glyphicon glyphicon-flash"></span> Innovation</li>
<li class="active"><span class="glyphicon glyphicon-gift"></span> Redeem</li>
<li><span class="glyphicon glyphicon-cog"></span> Settings</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-md-12 leftbar" style="margin-top: 20px;">
I want to free myself from this white box and be in a new box instead.<p></p>
</div>
</div>
Edit: The problem was that now the column did not match the width of the green navbar div. You must remember that bootstrap's CSS will apply a padding of 20px left & right to every column. In order to fix this you should add a custom class to override that. Add the following class:
.noPadding {
padding-left: 0;
padding-right: 0;
}
Add this class to the following div:
<div class="col-md-2 noPadding">
<div class="col-md-12 leftbar" style="margin-top:50px;">
</div>
<div class="col-md-12 leftbar" style="margin-top: 20px;">
</div>
</div>
Edited Solution Bootply: http://www.bootply.com/tLCcdki4uP