Ich habe mir den folgenden Code ein wenig zurecht gebogen. Auf den ersten Blick funktioniert auch alles super.
Leider ist aber der Container doppelt, zu sehen auf meiner Webseite http://www.aus-suederelbe.de ganz oben.
Wie kriege ich den einen weg? 
CSS
<div class="iconBox grid33 grid marginTop">
<div class="circleBig">
</div>
<div>
<header class="boxSubHeadline">
<h2>Betriebsferien</h2>
</header>
</div>
<div class="textBox">Liebe Leser, während unserer Betriebsferien vom 30. Juli bis zum 14. August ist unsere Redaktion im Notfall unter [email protected] zu erreichen. Aktuelle Nachrichten wird es in dieser Zeit nicht geben, wofür wir um Verständnis bitten.
</div>
</div>
<div class="iconBox grid33 grid marginTop">
<div class="circleBig">
</div>
<div>
<header class="boxSubHeadline">
<h2>Ereignis melden</h2>
</header>
</div>
<div class="textBox">Wenn in der Nachbarschaft komische Sachen passieren oder die Sirenen von Polizei und Feuerwehr nicht mehr aufhören, dann freuen wir uns über die schnelle Kontaktaufnahme via E-Mail an [email protected] um die Hintergründe recherchieren zu können. Vielen Dank für das Mitmachen!
</div>
</div>
<div class="iconBox grid33 grid marginTop">
<div class="circleBig">
</div>
<div>
<header class="boxSubHeadline">
<h2>Spenden sammeln</h2>
</header>
</div>
<div class="textBox">Wer sich aktiv an unserer Community beteiligt, kann mit seinen Aktivitäten Spendenprojekte aus dem Süderelberaum unterstützen. Wie das genau funktioniert, kann hier nachgelesen werden.
</div>
</div>
<div style="clear: both;"> </div>
<style type="text/css">
.textBox {
padding: 10px;
}
.iconBox {
background: rgba(0,0,0,0.05);
padding: 10px;
text-align: center;
color: rgba(0,0,0,0.6);
}
.boxSubHeadline h2 {
font-size: 2rem !important;
}
.iconBox h2 {
font-weight: 300 !important;
}
@media (min-width: 801px) {
.grid33 {
width: 33%;
}
}
@media (min-width: 801px) {
.grid {
float: left;
box-sizing: border-box;
}
}
</style>