Block Borders Using Bootstrap

Question

I have a sidebar block using bootstrap with two image blocks, one on top of the other, and my client wants a glowing red border around the blocks. I have a black background and the border for the glow. Here is the problem, when I resize the browser to a tablet size, the black background and border are wider than the image and the image is not centered. I want the border and glow to be 10px around the image and centered in the screen, not to the left. If I use a transparent background the image is to the left and the red border spans the whole screen and once again looks bad. Here are two screenshots:

I want the images to resize and be next to each other like other responsive templates with the glow and nothing I try is working. This is all probably pretty simple but I am lost. I am learning but this is driving me crazy. I have applied some additional css through c5 to give a glow to the images in the block. This is the code that comes up when I use Chrome dev tools:

element.style { }

#blockStyle167Sidebar40 {
background-repeat: no-repeat;
background-color: #000000;
-webkit-box-shadow: 0 0 6px 4px rgba(255,0,0,.7);
box-shadow: 0 0 6px 4px rgba(255,0,0,.7);
padding: 10px;
}
.pic {
border: 1px solid #000000;
height: 245px;
width: 370px;
overflow: hidden;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheetdiv {
display: block;
}
Inherited from div#sidebar-wrap.span4.sidebar-wrap.sidebar.color-content.pad
#main-content .color-content {
color: #FFFFFF;
}
Inherited from div.row-fluid.has-sidebar
#page .row-fluid {
color: #ffffff;

I am sorry this is so long but my site is in maintenance mode and I don't know how to link the page. I could give someone acces so the can look at it.

Thanks for any help.

Answer 1

Essentially what you need to do is create a transparent border of 10px with a red box shadow.

img {
  border: 10px solid transparent;
  box-shadow: 0px 0px 15px 0px rgba(255,0,0,1);
}

Then set each of the images to the width % you want.

See this jsfiddle http://jsfiddle.net/TZh2Y/