Divs appears inside a brother div, not inside his parent - html

Question

Im working on a wordpress page, want to display the content of posts in a specific layout, it work well, but when I add another post, the posts "dos" and "tres", appears inside the post "uno", instead of on his real parent the "nested" div. any clues?
<div class="grid">
<div class="post principal">
<!--show data-->
</div>
<div class="nested">
<?php if($count_post>1){?> <!--if there is more post fill div with data-->
<div class="post uno">
<!--show data-->
</div>
<?php }else{?>
<div class="post uno">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
<?php if($count_post>2){?>
<div class="post dos">
<!--show data-->
</div>
<?php }else{?>
<div class="post dos">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
<?php if($count_post>3){?>
<div class="post tres">
<!--show data-->
</div>
<?php }else{?>
<div class="post tres">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
</div> <!--end nested-->
</div> <!--end grid-->
here it is all the code, the wierd thing is that lets say I have two posts in the array and all is correctly displayed, but when I add another the post "dos" and "tres" changes parent
<?php $the_query = new WP_Query( 'posts_per_page=7' );?>
<!--Obtener la cantidad de post-->
<?php $count_post = $the_query->post_count;?>
<div class="grid">
<div class="post principal">
<!--Obtener la id del post-->
<?php $post_id = $the_query->posts[0]->ID;?>
<!--Obtener la id de la imagen-->
<?php $thumbnail_id = get_post_thumbnail_id($post_id);?>
<!--Obtener source de la imagen-->
<?php $img = wp_get_attachment_image_src( $thumbnail_id, 'full');?>
<img id="img_prin" src="<?php echo $img[0] ?>" alt="">
<a href="<?php echo get_permalink($the_query->posts[0]);?>">
<h2>
<?php echo $the_query->posts[0]->post_name;?>
</h2>
</a>
<?php $content = get_post_field('post_content', $post_id);?>
<p>
<?php echo $content;?>
</p>
</div>
<div class="nested">
<?php if($count_post>1){?>
<div class="post uno">
<?php $post_id1 = $the_query->posts[1]->ID;?>
<?php $thumbnail_id1 = get_post_thumbnail_id($post_id1);?>
<div class="img_post">
<?php $img1 = wp_get_attachment_image_src( $thumbnail_id1);?>
<img src="<?php echo $img1[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[1]->post_name;?>
</h5>
<?php $full_post1 = get_post_field('post_content', $post_id1);?>
<?php echo $excerpt1 = substr($full_post1,0,50).'...';?>
</div>
</div>
<?php }else{?>
<div class="post uno"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
<?php if($count_post>2){?>
<div class="post dos">
<?php $post_id2 = $the_query->posts[2]->ID;?>
<?php $thumbnail_id2 = get_post_thumbnail_id($post_id2);?>
<?php $img2 = wp_get_attachment_image_src( $thumbnail_id2); >
<div class="img_post">
<img src="<?php echo $img2[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[2]->post_name;?>
</h5>
<?php $full_post2 = get_post_field('post_content', $post_id2);?>
<?php echo $excerpt2 = substr($full_post2,0,50).'...';?> <!--EXCERPT-->
</div>
</div>
<?php }else{?>
<div class="post dos"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
<?php if($count_post>3){?>
<div class="post tres">
<?php $post_id3 = $the_query->posts[3]->ID;?>
<?php $thumbnail_id3 = get_post_thumbnail_id($post_id3);?>
<?php $img3 = wp_get_attachment_image_src( $thumbnail_id3);>
<div class="img_post">
<img src="<?php echo $img3[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[3]->post_name;?>
</h5>
<?php $full_post3 = get_post_field('post_content', $post_id3);?>
<?php echo $excerpt3 = substr($full_post3,0,50).'...';?>
</div>
</div>
<?php }else{?>
<div class="post tres"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
</div>
<?php wp_reset_postdata(); ?>
</div>