I've centred code slider with the following :

.coda-slider-wrapper {position:relative;margin: 0 auto;width:50%;overflow:hidden;}

And added a box shadow effect :

-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
-moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);}

The box shadow is splling out of the slider frame. When I increase the page zoom level the slider stays in the center of the page but at 125% and over the text flows out of the container and scrollbars appear at the bottom of the panel despite adding overflow:hidden to the css. How do I make the panel, text and box shadow resize and stay in the center and get rid of the scrollbars?

http://mbmitservices.co.uk/TBSC/index.html

Full Coda slider css :

/* Insignificant stuff, for demo purposes */

	body { padding: 20px }
	.panel h2.title { margin-bottom: 10px }
	noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px;}
	
/* Most common stuff you'll need to change */

	.coda-slider-wrapper {position:relative;margin: 0 auto;width:50%;overflow:hidden;
	-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
	-moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
	box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);}
	.coda-slider { background: #ebebeb }
	
	/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
	.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }
	
	/* Change the width of the entire slider (without dynamic arrows) */
	.coda-slider, .coda-slider .panel { width: 800px; height:850px;} 
	
	/* Change margin and width of the slider (with dynamic arrows) */
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 600px;}
	.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }
	
	/* Arrow styling */
	.coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px; }
	
	/* Tab nav */
	.coda-nav ul li a.current { background: #39c; }
	
	/* Panel padding */
	.coda-slider .panel-wrapper { padding: 20px;}
	
	/* Preloader */
	.coda-slider p.loading { padding: 20px; text-align: center; }

/* Don't change anything below here unless you know what you're doing */

	/* Tabbed nav */
	.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden;}
	.coda-nav ul li { display: inline }
	.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none;
	font-family: 'PT Sans Narrow', sans-serif; font-size:18px;}
	
	/* Miscellaneous */
	.coda-slider-wrapper { clear: both; overflow: auto }
	.coda-slider { float: left; overflow: hidden; position: relative }
	.coda-slider .panel { display: block; float: left }
	.coda-slider .panel-container { position: relative }
	.coda-nav-left, .coda-nav-right { float: left }
	.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }