要素同士の重なりをなくしたい

Question

前提・実現したいこと　要素同士の重なりをなくしたい

画像の左の画像では"message-wrapper"とfooterが"lesson-wrapper"に重なってしまい、
footerの下に空白ができてしまっています。
右の画像のようにするにはどのようにするべきでしょうか。

ご回答よろしくお願いいたします。

    <div class="lesson-wrapper">
      <div class="lesson-container">
        <div class="heading">
          <h2>Learn Where to Get Started!</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
              <p class="lesson-title">HTML & CSS</p>
            </div>
            <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>
 ※途中略         
　　　　　
        </div>
      </div>
          <div class="clear"></div>
    </div>
    <div class="message-wrapper">
      <div class="message-container">
        <div class="heading">
          <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
          <h3>Let's learn to code, learn to be creative!</h3>
        </div>
        <span class="btn message">さっそく開発する</span>
      </div>
    </div>
    
    <footer>
      <div class="last-container">
        <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
        <p>Learn to code, learn to be creative.</p>
      </div>
      
    </footer>
  </body>
</html>

.lesson-icon p {
  position: absolute;
  top: 44%;
  width: 100%;
  color: white;
}

.text-contents {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  font-size: 13px;
  color: #b3aeb5;
}

.heading h3 {
  font-weight: normal;
}

.message-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
  clear:bottom;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  cursor: pointer;
  box-shadow: 0 7px #1a7940;
}

.message:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}

footer img {
  width: 125px;
}

footer p {
  color: #b3aeb5;
  font-size: 12px;
}

footer {
  padding-top: 30px;
  padding-bottom: 20px;
}
.last-container{
 max-width:1170px;
 padding:0px 15px;
 width:100%;
}

.clear{
  clear:left;
}

/* タブレット向けレイアウト */
@media all and (max-width: 1000px) {
  .container h1 {
    font-size:32px ;
  }
  .heading h2{
    font-size:20px;
  }
  .lesson{
    width:50%;
  }
  .text-contents{
    padding-bottom:50px;
  }
  .clear{
    clear:left;
  }
}

Comments

[dit.]

いくつか全角スペースが見受けられますが、実際のコードにも全角スペースがありますか？

Answer 1

lesson-wrapperの閉じタグが不足しているので、message-wrapperとfooterがlesson-wrapperに内包されていると判断されているようです。

<div class="message-wrapper"> の前に </div>を追加してみてください。

あと、修正依頼のコメントにもあるように全角空白も半角空白に置換しておいてください。

Comments

[ruri0333]

追加してみたのですが変わりませんでした…
ほかに考えられる原因はあるでしょうか？

[hatena19]

全角空白を半角空白に修正しましたか。

[ruri0333]

すいません、全角を探してみているのですがどこにあるのかわからなくて…

[ruri0333]

実際のコードで全角を検索してみましたが見当たりませんでした

[hatena19]

では、回答のコードを実際のものに修正してください。回答のコードには全角が含まれています。
実際のコードと違うものをみていては原因を指摘することはできません。

[ruri0333]

何度も申し訳ありません。修正しました。

[hatena19]

修正ありがとうございます。修正したコードで、"message-wrapper"と"footer"が"lesson-wrapper"に重なるような現象は確認できませんした。
分かりやすいように各要素の境界線(border)を追加したサンプルを作成しましたので、確認ください。
https://codepen.io/hatena19/pen/NWGgajq

[ruri0333]

サンプルまでありがとうございます！
コード自体に間違いがなかったことが分かってよかったです。
ありがとうございました☺️