要素の被り　HTML,CSS

前提・実現したいこと

CSSとHTMLでSPのサイトを構築しています。

発生している問題・エラーメッセージ

送付画像１枚目のようにtextとbuttonの要素がかぶって表示されてしまうのですが
なにか解決策ございますでしょうか？
目標物は２枚目の画像になります。

HTML

          <h2 class="sub_title">BLOG</h2>
          <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit est facilis maiores, perspiciatis</p>
          <div class="text_underline"></div>
          <ul class="blog_list">
            <li class="blog_contents">
              <img class="blog_img" src="assets/images/blog_01.jpg">
              <div class="blog_content">
                <h3 class="contents_title">45 Minimal Worksspace Rooms for Web Savvys</h3>
                <p class="contents_text">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
                <a href="" class="button">MORE</a>
              </div>

CSS

    padding: 70px 15px;
  }

  .blog_contents {
    margin-top: 50px;
    text-align: left;
  }

  .blog_img {
    width: 100%;
  }

  .contents_title {
    color: #626262;
    font-size: 20px;
    margin-top: 15px;
  }

  .contents_text {
    color: #808080;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 10px;
  }

  .button {
    margin-top: 40px;
    padding: 15px 140px;
    color: #fff;
    text-decoration: none;
    background-color: #ffd700;
  }