我怎么能避免这个标题溢出？

Question

只是通过创建一个免费的WordPress主题来玩，但我很困难，因为帖子的标题似乎在很长时间内溢出。

请问我该如何解决这个问题。

这是显示错误的图像。

红色边框是压下它下方容器的边框。

感谢您的帮助。

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.posts-not-found {
  border: 2px solid red;
  padding: 20px;
  left: 65px;
  right: 65px;
}
.layerit {
  width: 100%;
  height: 100%;
  padding-top: 150px;
  margin: 0 auto;
  background: rgba(0, 0, 0, .3);
  padding-top: 150px;
  position: relative;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  transition: background-color .9s ease;
  border: 1px solid white;
}
.navbar a {
  padding-top: 30px;
}
.navbar-brand {
  font-size: 25px;
}
.home-title {
  color: white;
}
#title-text {}
.home-author {
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}
.no-margin {
  padding: 0;
  margin: 0;
}

HTML

<?php get_header(); ?>
<div class="row">
<?php
if (!have_posts() ) : ?>
    <div class="posts-not-found">
        <h1>Nothing Found</h1>
            <p>It seems we can’t find what you’re looking for. Perhaps searching can help.</p>
    </div>
<?php endif; ?>

<?php
if ( have_posts() ) { 
while ( have_posts() ) : the_post();
 ?>
<div class="col-md-4 col-sm-6 col-xs-12 no-margin">
    <div class="layerit">
        <h2 id="title-text" ><a class="home-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="home-author">by <?php the_author(); ?> on <?php echo get_the_date(); ?> </p>

    </div>
</div><!-- /.blog-post -->

 <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
            <?php the_title(); ?>

    <?php endif; ?>

 <?php
 endwhile;
}

 ?>
</div>
 <nav>
 <ul class="pager">
 <?php if ($wp_query->max_num_pages > 1 ) : ?>
 <li><?php next_posts_link('Older Posts'); ?></li>
 <li><?php previous_posts_link('Newer Posts'); ?></li>

 <?php else: ?>
        <li>No Newer/Older posts</li>
<?php endif; ?>
</ul>
 </nav>

 <div class="row before-footer-area">
    <hr class="hidden-xs hidden-sm">
    <div class="col-md-4 hidden-xs hidden-sm">
     <?php if ( is_active_sidebar( 'footer-1' ) ) { dynamic_sidebar( 'footer-1' ); } ?>

    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
     <?php if ( is_active_sidebar( 'footer-2' ) ) { dynamic_sidebar( 'footer-2' ); } ?>

    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
    <?php if ( is_active_sidebar( 'footer-3' ) ) { dynamic_sidebar( 'footer-3' ); } ?>

    </div>
 </div>


<div class="row">
<div class="col-md-12">
<?php get_footer(); ?>
</div>
</div>