CSS / bxSlider: How to avoid that Images are overlapping parent div

I am using the plugin bxslider (http://bxslider.com/) which in general works great.

My only issue is that the plugin comes with a set shadow of 5px for its viewport so if I am using it inside a div with a colored border on the div it always overlaps that border - the smaller the screen the more obvious the overlap.

Is there an exact way in CSS to override this (exact because it needs to work on small screens / mobiles as well) ?

Firebug shows me the following default CSS that is used for the viewport:

.bx-viewport {
    background: none repeat scroll 0 0 #fff;
    border: 5px solid #fff;
    box-shadow: 0 0 5px #ccc;
    left: -5px;
    transform: translateZ(0px);
}

I tried the following which resolves the issue for the left border but then it's overlapping the right border:

.bx-viewport {
    left:3px !important;
    padding-right:3px !important;
}

Update: It works when I set the width of the inner div to 99% but that only covers the larger screens, on mobile the 1% difference is not enough - that's why I am trying to find an exact workaround. Also, the issue is only for IE 8 as in newer browsers the CSS calc function works great ( width:calc(100% - 9px) !important; ).

Am I wrong in assuming that you could simply use:

box-shadow: none !important

I can't imagine a situation where that wouldn't work.