Darstellung Terminkalender

[Oliver - 1]

Hallo,

vielleicht so?

<section>
		
  <header>
    <h1 class="contentHeader">Terminkalender</h1>
    <div class="contentHeaderNav">
     <ul>
	<li><a href="#">Alle Termine</a></li>
	<li><a href="#">Konzerte</a></li>
	<li><a href="">Partys</a></li>
	<li><a href="">Flohmärkte</a></li>
     </ul>
     </div>
  </header>
		
  <article class="teaser">
   <div class="teaserImage">
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97150&w=300&h=150" alt="Test Bild">
   </div>
   <div class="teaserText">
     <h1>Test Artikel 1</h1>
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
   </div>
  </article>
		
  <article class="teaser">
   <div class="teaserImage">
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97150&w=300&h=150" alt="Test Bild">
   </div>
   <div class="teaserText">
     <h1>Test Artikel 1</h1>
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
   </div>
  </article>

</section>

Und mein CSS

section {
	max-width: 980px;
	margin: 0 auto;
	box-sizing: border-box;
}

.contentHeader {
	border-bottom: 3px solid #c0c7ba;;
	padding-bottom: 5px;
}

.contentHeaderNav {
			
}

.contentHeaderNav ul {
	list-style-type: none;
	padding:0;
	margin: 0;
}

.contentHeaderNav ul li {
	display: inline-block;
	padding-right: 1em;
}

.contentHeaderNav ul li a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
}

.teaser {
	width: 30.70%;
	display: inline-block;
	background: #efefef;
	margin-right: 2.15em;
}

.teaser:last-child {
	margin-right: 0em;
}

.teaserImage {}

.teaserText { 
	padding: 0 1em;
}

Hier ein weiteres Online Beispiel: http://codepen.io/anon/pen/PZobga