The issue of overflow arises due to the background assigned to a column within a .row class. By default, .row grants negative margins which are countered by padding applied through col-xx-xx.
To address this, you can either eliminate the margins by overriding them on the row:
.shadow > .row {
margin-right: 0;
margin-left: 0;
}
Alternatively (and preferably), assign a left margin and reduce the width of the target element:
<div class="col-sm-12 col-md-12 col-lg-12" style="background-color:black; margin-left: 15px; width: 90%;">
<h3 style="color: white">Purchase Order</h3>
</div>
A demonstration of these solutions is available in a new fiddle, accessible here.
In such scenarios, it's unnecessary to nest a row inside each column. A more efficient approach would involve having a standard DIV within the outer column for the header (with a background) and another div for the body. Here's a suggested implementation:
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail shadow">
<div class="header">
<h3 style="color: white">Purchase Order</h3>
</div>
<div class="caption">
<h3>3</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">View</a></p>
</div>
</div>
</div>
This structure will automatically manage the widths. You can then style .header to include the background and adjust margins if needed to enhance the headers:
.header {
background-color: #000;
padding: 5px;
//margin-left: -5px;
//margin-right: -5px;
}
An updated fiddle showcasing this setup can be viewed here.
I trust this guidance proves helpful! :)