Why do I get wrong alignment in this if I use bootstrap? - html

Question

If I use bootstrap, it messes the alignment up on my page. Member names should be appeared right next to icon, but with Bootstrap, they overlap the icon.
How can I fix this?
Also, when the browser window is made smaller, the square line gets messed up too. I want the data to have a border when the window is small.
So I don't want it to look like this:
But rather, like this:
If possible I want to have these icon, and name in middle not on the top.
DEMO http://jsfiddle.net/sbq7X/
HTML
<div class="store_row">
<div class="store_left">
<div class="store_title">walmart</div>
<div class="store_location">Located in California</div>
</div>
<div class="store_right">
<div class="store_icon">
<img class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon-300x266.jpg" />
</div>
<div class="introduction">
<div class="name1">John Tailor</div>
<div class="name2">Mike Smith</div>
<div class="name3">Jessica Swan</div>
</div>
</div>
</div>
<div class="store_row">
<div class="store_left">
<div class="store_title">walmart</div>
<div class="store_location"><span class='text-error'>Located in California</span></div>
</div>
<div class="store_right">
<div class="store_icon">
<img class="img-polaroid" src="http://media-cache-ec1.pinterest.com/avatars/walmarthub-1349815045_600.jpg" />
</div>
<div class="introduction">
<div class="name1">John Tailor</div>
<div class="name2">Mike Smith</div>
<div class="name3">Jessica Swan</div>
</div>
</div>
CSS
div.store_row{
min-width: 300px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
border:1px solid;
display:table;
}
div.store_left{
width: 300px;
display:inline-block;
vertical-align:top;
}
div.store_right{
width: 300px;
display:inline-block;
vertical-align:top;
background-color: #FFFFFF;
}
div.store_title{
background-color: #000000;
color: #FFFFFF;
height: 35px;
padding:5px;
}
div.store_location{
height: 35px;
border-right:1px solid;
background-color: #FFFFFF;
padding:5px;
}
div.store_icon{
width: 70px;
height: 70px;
display:inline-block;
}
div.store_icon img{
width:100%;
height:100%;
}
div.introduction{
display:inline-block;
vertical-align:top;
width:200px;
text-align: left;
}
.... and bootstrap

Answer 1

img-polaroid class has 4px padding and it causes the problem:
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
See the fiddle where it's removed.
EDIT: The alignment is working fine as well. You have static width for the all elements and they're too wide for fiddle. I've decreased their size so they are inline now.