Wordpress page of posts issue - php

Question

I'm trying to make page of posts basing on the example from wordpress codex.
I am using a beautiful WP theme (Radcliffe) and have no success in combining it with mentioned example.
The page I've created works, indeed, but posts are overlapped, one on another. Below it there is a lot of white space and, in the end, the footer at the very bottom of this page.
My page looks like that for now:
<?php get_header(); ?>
<div class="content">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
wp_reset_postdata();
endwhile;
endif;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'category_name' => 'testy',
'paged' => $paged
);
$list_of_posts = new WP_Query( $args );
?>
<?php if ( $list_of_posts->have_posts() ) : ?>
<?php /* The loop */ ?>
<?php while ( $list_of_posts->have_posts() ) : $list_of_posts->the_post(); ?>
<?php // Display content of posts ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<div class="posts">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$total_post_count = wp_count_posts();
$published_post_count = $total_post_count->publish;
$total_pages = ceil( $published_post_count / $posts_per_page );
if ( "1" < $paged ) : ?>
<div class="page-title section small-padding">
<h4 class="section-inner"><?php printf( __('Page %s of %s', 'radcliffe'), $paged, $wp_query->max_num_pages ); ?></h4>
</div>
<div class="clear"></div>
<?php endif; ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php endwhile; ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div class="archive-nav">
<?php echo get_next_posts_link( '« ' . __('Older posts', 'radcliffe')); ?>
<?php echo get_previous_posts_link( __('Newer posts', 'radcliffe') . ' »'); ?>
<div class="clear"></div>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
could somebody please show me my mistake?

Answer 1

this the css for the page content, maybe someone could take a look?
I still think the problem is somewhere in php code, I haven't touch the css yet since I've installed this theme.
.post { position: relative; }
.posts .post.has-featured-image { min-height: 266px; }
/* featured media */
.featured-media {
position: relative;
display: block;
width: 100%;
max-height: 682px;
}
a.featured-media:hover { opacity: 0.75; }
.featured-media > img {
visibility: hidden;
display: block;
margin: 0 auto;
}
.media-caption-container {
position: absolute;
bottom: 5%;
right: 5%;
left: 5%;
text-align: center;
}
.media-caption {
display: inline-block;
padding: 9px 12px;
border-radius: 3px;
background: #444;
background: rgba(17,17,17,0.5);
font-size: 0.8em;
line-height: 120%;
font-weight: 400;
font-style: italic;
color: #fff;
}
.media-caption:hover { background-color: rgba(17,17,17,0.75); }
/* post header */
.post-header { display: block; }
a.post-header { position: static; }
a.featured-media + a.post-header { position: absolute; }
a.post-header {
background: #BFBFBF;
background: rgba(17,17,17,0.35);
bottom: 0;
left: 0;
right: 0;
color: #FFF;
padding-left: 10px;
padding-right: 10px;
}
a.post-header:hover {
background: #333;
background: rgba(17,17,17,0.75);
color: #FFF;
}
.post.no-featured-image a.post-header { position: static; }
.post.no-featured-image a.post-header:hover { background: #333; }
a.post-header:hover .post-title { color: #CA2017; }
.post-meta-top {
text-transform: uppercase;
color: #FFF;
font-size: 0.9em;
letter-spacing: 1px;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}
.post-meta-top .sep {
color: #CCC;
margin: 0px 5px;
font-weight: 400;
}
a.post-header .post-meta-top .sep {
color: #fff;
color: rgba(255,255,255,0.5);
text-shadow: none;
}
.sticky .post-meta-top { display: block; }
.post-title {
font-family: 'Abril Fatface', serif;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
a.post-header .post-title {
max-width: 90%;
margin-left: auto;
margin-right: auto;
text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}