Box nicht mittig

Hey,

Ich bekomme immer den Fehler das die Box nicht mittig ist und meine Div boxen den main berreich überschreiten siehe Bild.

Bild nicht mittig:


Bild überschreitet die main box , das oben im Hintergrund ist die main box der Rest mit den Text sind die Div boxen:


HTML Code:

CSS Code:

Kennt wer ne Lösung dafür?

Zum 1. Problem: Mit margin:auto kann man die Box nur dann horizontal zentrieren, wenn sie eine feste Breite hat und nicht nur width:auto. Eine einfache Möglichkeit, die mir spontan einfällt, wäre, um die 3 Boxen mit dem Text einen weiteren div Container zu erstellen, in dem sich diese Boxen dann befinden. Dieser bekommt dann die Eigenschaften display:table (Darstellung als Tabelle) und margin:auto. Schon sollte es mittig sein.

Zum 2. Problem: So wie ich das sehe hast du nirgends ein "clear" drin. Wenn du Container floatest, muss du unter diesen Containern etwas Ähnliches wie <br style='clear:both;' /> (irgendein Container mit der Eigenschaft clear, kannst natürlich so verändern wie du es brauchst) einfügen, damit die Höhe der gefloateten Container angenommen wird.