Box-Shadow Being Cut Off

The problem is your center-main div is cropping off the edge of the shadow. Set overflow:visible on this and you should see it.

use padding + negative margin like:

.img {
  padding: 10px;
  margin: -10px;
}

I have run into this problem multiple times with IE, and the best solution I've found is to use a transparent outline around the div. This seems to prevent IE from clipping the box shadow, as it does even in cases where Gecko and Webkit don't. One great thing about using outline to fix this problem is that it doesn't affect the position of the div.

For example, I had a div with which I had used position: absolute and bottom: -30px to put it in a certain place relative to its parent div. IE, and only IE, was cutting off the top and bottom of the box shadow. Adding this outline fixed it, without changing the position.

outline: 10px solid transparent;

you can set this style img tag for show shadow-box correctly

.img{
  margin:20px;
 -moz-box-shadow: 0 0 5px #555;
  -webkit-box-shadow: 0 0 5px #555;
  box-shadow: 0 0 5px #555;
 }

you can use

.img{
    filter: drop-shadow(0 0 5px #555);
}

instead

I managed to resolve the same issue on my local project by setting the image to have the following css property:

position: relative;

I've also encountered this issue. In these cases I add position: relative and a z-index to the box shadow container.

Please see this fiddle for a visual.