Tienes esta estructura:
<body>
<div id=main>
</div>
<div id=slider>
</div>
</body>
Y el slider lo posicionas absoluto, es decir que estas diciendole que se posicione en base a la esquina superior izquierda de la pantalla, y eso hace:
Código CSS:
Ver original#slide {
display: block;
height: 290px;
overflow: hidden;
width: 100%;
box-shadow: 5px 0 5px 0 #999;
position: absolute;
left: auto;
top: 180px;
margin: auto;
}
El left: auto no funciona porque no tienes ningún elemento padre posicionado y con ancho definido, es decir, ¿cual es la referencia de ese left:auto? ninguna, en consecuencia se posiciona en left:0.
Podrías definir un contenedor, o simplemente cambiar la estructura metiendo el slider dentro del main para que quede centrado tal como todo el resto de los elementos dentro de él.
Saludos