Bootstrap different sizes inside same column - css

Question

I'm trying to make a heading that attaches it self to my listview in bootstrap. However the heading does not extend as far as the listview, even though they are in the same column.
I want the title to extend as far as the list, there must be something I'm missing in the CSS.
My Code:
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5" style="margin-left:40px">
<div class="heading-surround-default-custom">
<div>
<asp:Label ID="LabelTitel" runat="server" CssClass="heading-default-custom" Text="Titel"></asp:Label>
</div>
</div>
<div class="list-group">
<asp:ListView ID="ListViewWebsite" runat="server" DataKeyNames="WebsiteID" ClientIDMode="AutoID">
<ItemTemplate>
<tr>
<td>
//List code
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</div>
</div>
</div>
Custom CSS used in code:
.heading-default-custom {
color:#FFF;
margin-left: 10px;
font-weight:200;
font-weight:bold;
font-size:20px;
}
.heading-surround-default-custom {
background-color:#FF6600;
}
Sorry for mixing style, CSS and poor formatting. A result of repetitive trial and error. Pretty sure I'm missing something really simple.

Answer 1

You can use Bootstrap's built in panel classes to help you here (docs).
Bootply example: http://www.bootply.com/mT5mVxVpOT
HTML:
<div class="panel panel-custom">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Panel content 1</li>
<li>Panel content 2</li>
<li>Panel content 3</li>
</ul>
</div>
</div>
Then add your CSS to tweak the colors etc.
.panel-custom .panel-heading {
color:#FFF;
font-weight:200;
font-weight:bold;
font-size:20px;
background-color:#FF6600;
border-radius: 0;
}
.panel-custom .panel-body{
background-color: #eee;
}