如何在bootstrap 3中删除这些图像之间的空白区域

Good day,

Am in the process of building a free wordpress theme for entrepreneurs but encountered this challenges:

1. I want to get rid of white spaces in between the post containers as show in the image above.

2. in the posts in between, the post dates are not displaying, i don't know why.

here are my code:

HTML/PHP

<div class="container-fluid">

<div class="navbar">

<div>
<a class="navbar-brand" href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" >
<?php bloginfo('name'); ?></a>
</div>

<div>
    <!--<h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>-->
    <?php $description = get_bloginfo( 'description', 'display' ); ?>
<?php if($description) { ?><p class="blog-description"><?php echo $description ?></p><?php } ?></p>

    <?php wp_nav_menu (array( 
        'theme_location' => 'header-menu', 
        'menu_class' => 'nav navbar-nav pull-right' 
    ) ); ?>

</div>

CSS:

.layerit {
width: 100%;
height: 100%;
padding-top: 170px;
margin: 0 auto;
background: rgba(0, 0, 0, .3);
position: relative;
bottom: 0;
right: 0;
text-align: center;
transition: background-color .9s ease;

}

.home-title {
 color: white;

 }

.home-author {
 color: white;
 padding-top: 20px;
 padding-bottom: 90px;
}


 div.no-margin {

 }

Thanks for the help.

For vertical lines: font-size: 0; on parent element

OR

ul {
  padding: 0;
}
li{
  display: inline-block;
  background: red;
  width: 20px;
  height: 20px;
}

<ul>
  <li></li>
  <li></li>
</ul>

SHOULD BE

ul {
  padding: 0;
}
li{
  display: inline-block;
  background: red;
  width: 20px;
  height: 20px;
}

<ul>
  <li></li><li></li>
</ul>

For horizontal lines: vertical-align: top; for child elements

EDIT: Putting all <li> tags in a single line removes the whitespace in the markup, which is what's causing the spaces in the original question. Another more manageable way to fix it is to use html comments between the closing tag and the next opening one, like this:

<li>...</li><!--

--><li>...</li><!--

--><li>...</li>

</div>