Ubicar bien el texto en el div

[navegantes]

No, no hiciste lo que te dije

No cambiaste los <div> de tu menu por una lista jeje

El <div id="top_nav"> tiene que desaparecer y sustituirlo por esto

Código HTML:

<ul id="top_nav">  
      <li id="top_nav_home">Home</li>
      <li id="top_nav_forums">forums</li>
      <li id="top_nav_cp">Control Panel</li>
      <li id="top_nav_client">Client</li>
</ul>
 

Para que no te salga el punto de la lista usa esta regla

Código CSS:

#top_nav{ list-style:none;}
 

Sería cuestión de ajustar un poco las cosas, pero creo que esto es lo que pedías.

El problema radica en el <p> que ponías delante de cada menú. Solo quitando eso se arreglaba, pero ya que estamos cambiando cosas, te cambio un poco más.

Piensa que el navegador tiene su propia hoja de estilos interna, así que todo aquello que no controles manualmente con tus propias reglas el navegador se encarga de gestionarlo. En este caso <p> tiene margenes a sus lados y por eso se desplaza. Piensa también que las etiquetas tienen su función. Una <p> se pensó para marcar párrafos no listas. Y un menú es una lista de cosas.

Tienes muchos <div> anidado y eso puede ser una locura, cuidado porque al final te puedes volver loco.
Y otra cosa más he visto que llamas a dos hojas de estilo por separado.Por los nombres diría que es para centrarte en lo que hay en cada una. Me parece bien, pero cuando la web esté lista mejor junta todo en una sola hoja.
El navegador no tendrá que revisar dos ficheros y a la larga es más cómodo gestionarlo. A no ser que sean miles de reglas entonces vale, pero por lo que he visto por el momento mejor todo en uno.

Espero que todo esto te sirva un poco de ayuda.

Ya que estamos... edito esto un poco.

Lo anterior estaba bien, pero usas demasiadas reglas para hacer una cosa. De la siguiente manera se simplifica todo mucho más:

Código HTML:

<ul id="top_nav">  
      <li>Home</li>
      <li>forums</li>
      <li>Control Panel</li>
      <li>Client</li>
    </ul>
 

Y mediante selectores descendientes:

Código CSS:

#top_nav li{
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    text-align: center;
    padding-top: 0px;
    float:left;
    margin-right:40px;
}
 

Todo el resto de reglas que tenias asignadas con tantos id puedes quitarlas. En este caso como es una lista todo se posiciona uno debajo del otro. Con float:left hace que todo se monte a la izquierda y margin-right le da un margen a la derecha sino todo saldría seguido.

Así la cosa queda más limpia todavía.

;)