CSS styles are applied only for the first PHP-loop iteration - php

Question

My problem is that CSS styles are applied only for the first PHP loop iteration. PHP loop outputs Wordpress posts. I've inspected the page structure and saw that it objects have the needed structure (blocks and classes), but CSS is not applied to them except for the first one.
<div id="events-feed">
<div class="container">
<div class="sym rose"></div>
<div class="title-wrapper">
<div class="title-wrap">
<div class="line"></div>
<div class="title">Наши события</div>
<div class="line"></div>
</div>
</div>
<?php
$args = array(
'posts_per_page'=> 5,
'orderby' => 'comment_count',
'category_name=events' );
$q = new WP_Query($args);
if($q->have_posts()) {
while($q->have_posts()){ $q->next_post();
$post_id = $q->post->ID;
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ) );
$title = get_the_title($post_id);
$date = get_the_date('d.m.Y', $post_id);
$content = get_post_field('post_content', $post_id);
?>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header">
<?php echo $title; ?> </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title">
<?php echo $date; ?> </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
<?php echo $content; ?>
</div>
</div>
</div>
</div>
<?php } } wp_reset_postdata(); ?>
The Styles & HTML are:
#events-feed {
background-color: #F9F6EB;
padding-top: 0.1px
}
#events-feed .title-wrapper {
padding: 20px 0;
position: relative;
text-align: center;
font-family: "PT Serif", serif;
padding: 0 50px;
margin-bottom: 65px
}
#events-feed .title-wrapper .title-wrap div {
display: inline-block;
vertical-align: middle
}
#events-feed .title-wrapper .title-wrap .line {
background: #0E0304;
height: 1px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 15%;
z-index: 99
}
#events-feed .title-wrapper .title-wrap .title {
background-color: #F9F6EB;
color: #0E0304;
font-size: 40px;
padding: 0 20px;
text-transform: uppercase;
z-index: 999
}
#events-feed .event-article {
background-color: #fff;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
color: #0E0304;
height: 1000px;
margin: 0 10% 100px;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)
}
#events-feed .event-article .events-post .post-img {
background-color: grey;
background-size: cover;
max-width: 2000px;
padding-top: 48%
}
#events-feed .event-article .events-post .post-header {
margin-top: 40px;
font-size: 34px;
text-transform: uppercase
}
#events-feed .event-article .events-post .post-date {
padding: 20px 0;
position: relative;
text-align: center;
margin-bottom: 30px
}
#events-feed .event-article .events-post .post-date .title-wrap div {
display: inline-block;
vertical-align: middle
}
#events-feed .event-article .events-post .post-date .title-wrap .line {
background: #7D8082;
height: 1px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 15%;
z-index: 99
}
#events-feed .event-article .events-post .post-date .title-wrap .title {
background-color: #fff;
color: #7D8082;
font-size: 20px;
padding: 0 20px;
text-transform: capitalize;
z-index: 999
}
#events-feed .event-article .desc {
font-size: 20px;
margin: 0 50px
}
#events-feed .event-article .desc p {
margin-bottom: 27px
}
#events-feed .event-article .desc ul {
margin: 0 0 27px 40px;
text-align: left
}
.line {
height: 1px
}
<div id="events-feed" style="margin-top: 160px;">
<div class="container">
<div class="sym rose"></div>
<div class="title-wrapper">
<div class="title-wrap">
<div class="line"></div>
<div class="title">Наши события</div>
<div class="line"></div>
</div>
</div>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header"> День рождения ElRumbo </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title"> 18.08.2015 </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
18.08.2015 мы празднуем день рождения! В этот день с 19:00 мы принимаем гостей только по предзаказу столика. И подарки будем дарить мы!
<ul>
<li>Праздничная лотерея</li>
<li>Скидка 20%</li>
<li>Бокал вина в подарок каждому</li>
</ul>
В 21:45 фаер-шоу от творческой группы "FaBula" Будем рады быть вместе с вами в наш праздничный вечер!
<strong>Подробности при заказе столика.</strong>
</div>
</div>
</div>
</div>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header"> День святого Валентина </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title"> 14.02.2016 </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
Dias de los Enamorados 14 февраля - День Святого Валентина В этот вечер по предзаказу столика вас ждут:
<ul>
<li>Скидка 20% на коктейли группы "Мартини"</li>
<li>Праздничная лотерея</li>
<li>Особый коктейль, которого нет в меню</li>
</ul>
</div>
</div>

Answer 1

Thanks to Mr. or Mrs. FlyffyKitten I found the solution:
I had to move the least two closing tags out of the loop since they refer to parent elements of the looped objects. Sorry for disturbing everyone. Thank you for being helpful!