3 Boxen über Seitenbreite verteilt

[Thomas Luethi]

Hallo,
Gemäss dem http://de.selfhtml.org/css/formate/box_modell.htm@title=Box-Modell setzt sich die totale Breite zusammen aus width + padding + border + margin.
33%+33%+33%+12px+12px+12px sind höchstwahrscheinlich mehr als 100%...

Statt der DIV-Suppe könntest/solltest Du eine Liste verwenden.
Die drei Listen-Elemente (LI) wären dann 33% breit, ohne margin/border/padding.
Und die restlichen Layout-Eigenschaften könntest Du auf die A-Elemente übertragen.
Grob gesagt etwas in der Art (ungetestet!):

<ul class="nav">  
 <li><a href="#">Club</a></li>  
 <li><a href="#">Ausbildung</a></li>  
 <li><a href="#">Termine</a></li>  
</ul>

ul.nav { list-style-type:none; }  
.nav li { float:left; display:inline; width:33%; margin:0; padding:0; }  
.nav li a { display:block; text-align:center; padding:8px 5px; border:1px solid #E5EBFF; border-radius:5px; cursor:pointer; color:#ffffff; background-color:#0039D8; }

Ergänzungen/Korrekturen werden sicher noch folgen von Leuten, die wacher sind als ich gerade jetzt...

Statt float:left; und display:inline; könntest Du ggf. auch display:inline-block; nehmen, siehe den Artikel von Gunnar.

Gute Nacht!
Thomas