css border around multiple links/images

wish help you to fix your issue Sorry, what you'd want is some kind of :parent pseudo-class that selects the child but applies to the parent, which unfortunately does not exist (not even in CSS3).
You'd have to do a bit of Javascript, selecting all elements matching #sidebar a:hover, then applying the red bottom border on the condition that they don't have a child IMG element.

it helps some times Here is a quick jsfiddle (jsfiddle) where I used background colors on the .row and .container to show what's happening. I used two span6's with your code structure, if you only need one span6, just remove the other. As for the border, you have to adjust both the box-shadow and the border on the .thumbnail class, since the box-shadow plays a part in the appearance of the border.
Here is another jsfiddle (2nd jsfiddle) that does not use uls/lis, but does use .row-fluid and puts the .thumbnails class inside the grid. In this version the thumbnails are centered in the span6's.

With these it helps I have two links (one a text link and one an image link): see image , Add a class to remove the border from some links.
CSS:

a.img {
    border: none;
}

<a href="#">This has a border</a>
<a class="img" href="#"><img sc="" alt="No border" /></a>

To fix this issue The border is not on the img, it's on the a, which is why a img {border: 0;} changes nothing. CSS unfortunetly doesn't have a :parent or :contains-selector which you could use to check if the a contains an image, so you'll have to separate links that do somehow. I suggest giving the links a class, for instance like this:

<a href="#" class="image">
    <img src="https://cdn0.iconfinder.com/data/icons/cosmo-medicine/40/dog-128.png">
</a>

a.image{border:none}

$(function(){
    $("a:has(img)").css({border:"none"});
});