when i re-size the browser window the slider goes out of the main container i am using bootstrap responsive css i see the extra margin in the slider container if i remove its ok but if i still make the window smaller slider goes out how to fix the bug...

http://jsfiddle.net/48y2Q/embedded/result/ http://jsfiddle.net/48y2Q/

providing my code below

<div class="container"> <div id="da-slider" class="da-slider" style="margin-top: 0px; margin-bottom: 0px; height: 300px; background-position: 2700% 0%;"> <div class="da-slide da-slide-fromright da-slide-current" style="width: 1122px;"> <h2><img src="http://www.defie.co/docs/examples/frontpage_rotate1A.jpg" alt="image01"></h2> <div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate1B.jpg" alt="image01"></div> </div> <div class="da-slide da-slide-toleft" style="width: 1122px;"> <h2><img src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="image01"></h2> <div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate2B.jpg" alt="image01"></div> </div> <div class="da-slide da-slide-toleft" style="width: 1122px;"> <h2><img src="http://www.defie.co/docs/examples/frontpage_rotate3A.jpg" alt="image01"></h2> <div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate3B.jpg" alt="image01"></div> </div> <nav class="da-arrows" style="width: 1122px;"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav> <nav class="da-dots"><span class="da-dots-current"></span><span class=""></span><span class=""></span></nav></div> </div>