html - Bootstrap layout -- divs not aligning properly -

so have simple html layout using bootstrap 3. have 1 outer div contains 2 divs on inside. top inner div seems wider bottom inner div. because both have background colors wanting them same width each other. struggling accomplish that.

please note: the actual application uses angular ng-repeat build inner divs, outer div needs left alone completely. ng-repeat defined.

i have published jsfiddle see problem. gray div needs same width blue div. help?

jsfiddle showing problem

the html code:

<div class="col-sm-10 col-sm-offset-1 caselist">    <div class="caselink-search">      <span>        <a href="#">link1</a>        <a href="#">link2</a>      </span>    </div>    <div class="case-info">       information goes here    </div> </div> 

the relevant css code:

.caselist {     margin-top: 2px;     background-color: #63a0d4;     color: #fff;     height: 3.0em;     padding-top: 0.5em;     vertical-align: middle; }  .caselink-search {     display: block;     padding-top: 5px; }  .case-info {     padding:10px;     margin-top: 7px;     background-color: #f2f2f2;     border: 1px solid #b3b3b3;     color: #000; } 

the bootstrap classes added outermost div adding padding don't want. remove col-sm-* classes , you'll lose padding. you've got hard coded height on case-list class, causing not expand contents, giving appearance of inner div being misaligned.

updated fiddle

the computed tab in dev tools window friend in situations this. also, fyi, bootstrap add kinds of custom styling generic elements form inputs, may or may not want.