Bien, ya está. Vamos punto por punto.
Primero que nada, un par de detalles, se te pasó cerrar un par de etiquetas por ahí:
#1, la del cierre de la lista, cerca de la línea 113. (faltó el </ul>
#2, la del div del id="contenedor" (poner un </div> justo antes del </body>)
Con respecto al cssindex.css, te recomendaría, donde tienes la declaración para html, que le agregues también body, así:
Código CSS:
Ver originalhtml, body {
height:100%;
width:100%;
margin:auto;
text-align:center;
background:url(../img/fondo.jpg) repeat-x;
}
Y finalmente, ahora sí, el famoso divisor que te da bronca, para arreglar ese asunto de la línea desplazada, es sólo cuestión de no aplicarle el class que le hiciste a la imagen directamente, sino más bien aplicárselo a un div que encierre a la imagen en sí.
En otras palabras, reemplazar:
Código HTML:
Ver original<img src="img/divison.png" name="Division" class="divison1" />
por
lo mismo con el otro divisor que tienes.
Ahora, como veo que quedan un poquito tirados hacia abajo, puedes entonces poner un div debajo de cada división, con el class ese de break que te dije antes, y le puedes agregar una altura determinada, algo así:
y entonces cada división debe quedar algo como:
Espero que te haya servido, y ahí te queda un rato para entretenerte en el CSS a ver si logras los márgenes que deseas.
Saludos!