css unterschiedliche Darstellung in IE und Firefox 7.01 [2]

Hallo, nun habe ich mich in die css-Syntax ein wenig hineingelesen, nur das theoretische und das praktische klappt bei mir schon etwas auseinander. Deshalb meine Bitte. Schaut Euch doch mal meine Testseite an (alle Links dort sind noch nicht verändert, also nur diese Testseite)
http://www.gyros-brasil.com.br/test-css.php
Mich würde auch interessieren, ob nun die Struktur dieser Seite den neueren Anforderungen entspricht oder ob ich noch immer alte Vorgehensweisen integriere.

Ich habe nun folgende Fragen:

A. Firefox

1.Wie kann ich die Navigationsspalte auf der linken Seite weiter nach links bringen ?
2.Ich gebe im screen.css Schriftgröße und -farbe für h1 an. Schrift müßte in weiß erscheinen. Wird aber nicht umgesetzt
(Schrift erscheint nur in weiß weil ich dies hier eingetragen habe.

    * {
    margin:0;
    padding:0;
    background-color: orange;
    color: white
    }

3.Das Gleiche passiert für h2 Wenn ich Schriftgrößen ändere, hat das keine Auswirkungen
4. ich habe für p> Schrift zentriert eingegeben, erscheint aber linksbündig.
5. ich habe für p> schrift auf bold gesetzt, bleibt aber dünn

B. Internet Explorer
1. Warum erscheint die komplette Schrift unterstrichen ?
2. Wo und wie muß ich eine Veränderung vornehmen, daß oben im Kopfbereich "Recomende esta pagina a um amigo"
ebenfalls wie bei Firefox zweizeilig gezeigt wird.

Nachfolgend kopiere ich noch das css-script ein:

/* screen.css */

* {
    margin:0;
    padding:0;
    background-color: orange;
    color: white
    }

html, body {
    height:100%;
}

#wrapper {
    min-height:100%;
    background-color: orange;
	width: 1101px;
	/*background-image: url(unechter-spalten-hintergrund.png);
	background-repeat: repeat-y;
	border:1px solid black;*/
}

#logo {

    background-color: orange;
	width: 1000px;
	padding-left: 0px;         /* links */
    padding-top: 0px;          /* oben */
}

#logo a {


	padding: 2px 2px 2px 2px;
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
}

#navigation a {

    background-color: orange;
	width: 150px;
	float:left;
	font-weight: bold;
	font-size: 12px;
	
}

#navigation a:hover {
	color: ffffff;
	background-color: #cba24b;
	border: 1px solid #453514;
}

#inhalt {

   margin-left: 151px;
   width: 900px;  

h2 {
    padding-bottom: 0.5em;
	font-size: 1.6em;
	color: white;
} 

h1 {
    padding-bottom: 0.5em;
	text-align: center;
	color:"#FFFFFF";
	background-color: orange;
	font-family: Vivaldi, "Brush Script", fantasy;
	font-size: 2em;
	font-weight:normal;
}

p {
     padding-bottom: 1em;
     line-height: 2em;
     letter-spacing: 0.3em;
     word-spacing: 2em; 
     text-align: center;
     font-weight: bold;
     background-color: orange;
}

Hallo Jörg, wieder mal vielen Dank für Deine Impulse und Anregungen. Ich habe nun weiter gebastelt und den Quelltext hoffentlich nun "moderner" gemacht. Bitte schau Dir diesen Text nochmals an, ob es noch Dinge gibt, die heute nicht mehr zeitgemäß sind.
http://www.gyros-brasil.com.br/test-css.php

Die meisten offenen Fragen habe ich nun dank Deiner Impulse und Studium der Internetseiten hinbekommen.

Für folgende Punkte habe ich bisher jedoch noch keine Lösung gefunden:
1. Wieso sind die Textzeilen von h1, h2, h3 nicht linksbündig, obwohl ich das in der css-Datei so angegeben habe ?
2. Wenn Du mit der Maus über meine Links oben im Kopf oder im Inhaltbereich fährst, dann erscheint ein brauner Hintergrundrahmen, genausolange wie der Text des Links (das ist so gewollt)
Aber links im verzeichnis klappt das nicht, da wird der braune Untergrund dann so lange wie die Breite vom Verzeichnis. Wie kann ich das ändern ?

Nachfolgend die nun aktuelle css-Datei:

/* screen.css */

* {

    margin:0;                  /*Aussenrand*/
    padding:0;                  /*Innenabstand*/
    text-decoration: none;     /*Unterstrich beim Link wird unterdrückt*/
   
    }

html, body {

    height:100%;
}

#wrapper {                                          /*ein wrapper ist ein Container*/

    min-height:100%;                                /*minimale Höhe"
    background-color: orange;                       /*Hintergrundfarbe*/
	width: 1101px                                    /*Breite*/  
	}

#logo {

   	width: 1000px;              /*Breite*/ 
	padding-left: 0px;         /* Innenabstand links */ 
    padding-top: 0px;          /* Innenabstand oben */
}

#logo a {

	padding: 2px 2px 2px 2px;      /*Innenabstand alle vier Richtungen*/
	background-color: orange;    /* Hintergrundfarbe */
	font-family: Arial, Helvetica, Verdana, sans-serif;    /*Schriftart in dieser Reihenfolge*/
    color:white;                  /* Schriftfarbe */
	font-weight: bold;              /*Schriftstärke*/
	font-size:0.8em;                 /*Schriftgrösse*/
	
}

#logo a:hover {

	color: ffffff;                                        /*Schriftfarbe*/
	background-color: #cba24b;                           /*Hintergrundfarbe*/

}


#navigation a {

    margin-left:2em;                                    /*Außenrand/Abstand links*/
    text-align:left;                                      /*Text linksbündig*/ 
    font-family: Arial, Helvetica, Verdana, sans-serif;     /*Schriftart in dieser Reihenfolge*/
    line-height:1.4em;                                /*Zeilenhöhe*/ 
    color:white;                                     /*Schriftfarbe*/
    background-color: orange;                       /*Hintergrundfarbe*/
	width: 150px;                                    /*Breite*/ 
	float:left;                                     /*setzt den kompletten Block nach links*/ 
	font-weight: bold;                                /*Schriftstärke*/
	font-size:0.8em;                                 /*Schriftgrösse*/

}

#navigation a:hover {

	color: ffffff;                                   /*Schriftfarbe*/
	background-color: #cba24b;                     /*Hintergrundfarbe*/
	}

#inhalt {

   width: 900px;                                   /*Breite*/  
   background-color: orange;                      /*Hintergrundfarbe*/
   }

#inhalt p {

   margin-left:15em;                                 /*Außenrand/Abstand links*/
   margin-right:5em;                                  /*Außenrand/Abstand rechts*/
   text-align:left;                                 /*Text linksbündig*/
   white-space:pre;                             /*Browser übernimmt bei Textdarstellung Abstände, Leerzeichen, Leerzeilen wie im Quelltext eingegeben*/ 
   font-size:1.0em;                               /*Schriftgrösse*/
   font-weight:bold;                                 /*Schriftstärke*/
   font-family: Arial, Helvetica,  Verdana, sans-serif;  /*Schriftart in dieser Reihenfolge*/
   line-height:1.4em;                                    /*Zeilenhöhe*/
   color:white;                                           /*Schriftfarbe*/
   
   }
   
#inhalt h1 {
  
   margin-left:15em;                     /*Außenrand/Abstand links*/
   margin-right:5em;                      /*Außenrand/Abstand rechts*/
   text-align:left;                        /*Text linksbündig*/
   font-size:1.5em;                        /*Schriftgrösse*/
   line-height:1.8em;                       /*Zeilenhöhe*/
   font-weight:bold;                      /*Schriftstärke*/
   color:white;                           /*Schriftfarbe*/
   }
   
#inhalt h2 {

   margin-left:15em;                       /*Außenrand/Abstand links*/
   margin-right:5em;                        /*Außenrand/Abstand rechts*/
   text-align:left;                          /*Text linksbündig*/
   color:yellow;                             /*Schriftfarbe*/
   font-size:1.2em;                           /*Schriftgrösse*/
   line-height:1.6em;                         /*Zeilenhöhe*/
   font-weight:bold;                         /*Schriftstärke*/
  }
   
#inhalt h3 {
   padding-top:275px;                     /*Innenabstand nach oben*/ 
   margin-left:15em;                       /*Außenrand/Abstand links*/
   margin-right:5em;                        /*Außenrand/Abstand rechts*/
   text-align:center;                         /*Text zentriert*/
   color:black;                              /*Schriftfarbe*/
   font-size:0.8em;                           /*Schriftgrösse*/
 }

#inhalt a:hover {

	color: ffffff;                           /*Schriftfarbe*/
	background-color: #cba24b;               /*Hintergrundfarbe*/
	
}

Hallo Jörg, vielen Dank für Deine weiteren Erklärungen, nun habe ich auch diese Hürde geschafft.
Nun habe ich nur noch einen letzten kleinen Punkt.
Ich habe im unteren Bereich meiner Seite einen Besucherzähler eingebunden, der aber nun linksbündig erscheint, obwohl ich bei css zentriert angegeben habe. Vielleicht liegt das daran, daß das kein Text ist, aber wie zentriere ich dann diesen Zähler ?

Hallo Jörg, Entschuldigigung, das habe ich nicht nochmals erwähnt, es geht noch immer um die Testseite (in der Originalseite ist der Counter in einem table eingebunden und da klappt das mit dem mittig sein).
Ich habe aber inzwischen weiter herumgebastelt, denn ich habe einen Counter auf dieser Testseite eingebunden für "Visitantes" und einen anderen Counter für "Bestellungen" (testweise auf der gleichen Seite)
Der Counter für Visitantes erscheint, aber eben leider linksbündig, nicht mittig wie gewünscht, komischerweise erscheint der zweite Counter für Bestellungen überhaupt nicht, ebensowenig eine Fehlermeldung.

<h3><? include "counter/Visitantes/counter.php"; ?> </h3>
     <h3><? include "counter/Bestellungen/counter.php"; ?> </h3>

Testseite ist: http://www.gyros-brasil.com.br/test-css.php

Hallo Jörg, danke für Deine Erklärungen, ich habe nun dieses div-Element eingebunden und zentriert, klappt einwandfrei, Danke für den Tipp.
Zusatzfrage. Ich habe im css-Script folgendes eingefügt:

#counter {                             
width:150px;
margin:auto;
}

Frage: Ich habe mal testhalber die Breite auf 350 verändert, warum ändert sich dann nichts in der Darstellung des counters ?

Ich habe nun die Veränderungen die ich auf meiner test-css gemacht habe sinngemäß übertragen auf alle anderen Seiten. FRUST.
Wenn Du nun die Originalseite aufrufst
http://www.gyros-brasil.com.br/
dann erscheint der oberste Link (O que e gyros) absolut in Ordnung, auch der nachfolgende Link ist in Ordnung, aber alle Verlinkugen darunter, erscheinen wieder versetzt, bspw. ein Teil rechts neben Kopfzeile, Rest im normalen Bereich. Woran liegt das ?