Moin!
Keine wirkliche Lösung: http://codepen.io/anon/pen/GoRNyM
Grund: Du vermixt verschiedene Breitenangaben; 3* 30% + 2*2.15 em sind bei mir zu breit:
section { max-width: 980px;…
…
.teaser { width: 30%; …; margin-right: 2.15em;
So werden bei mir nur 2 Spalten nebeneinander angezeigt - danach kommt der Umbruch da ich unter Linux andere Schriftbreiten habe (deshalb habe ich für den Test den Wert auf 30% reduziert, was aber auch "nicht wirklich richtig" ist). Das mit dem Umbruch kann auch auf anderen Geräten (Tabletts mit Android oder iOS ...) passieren.
Die Liste mit den Links formatierst Du dann im Prinzip so:
nav.contentNav ul {
list-style-type:none;
margin:0;
padding:0;
// Höhe wie Überschrift
// vertical-Align: bottom
}
nav.contentNav ul li {
display:inline-block;
// oder: display:block; float:left; width: Xem; // Breite eingeben
margin:0; // oder: was auch immer
padding:0; // oder: was auch immer
}
Jörg Reinholz