div要素が重なり合って文字が隠れます。

Question

お世話になります。
iSaraというプログラミングスクールのサイトの模写をしている初心者コーダーです。
画面キャプチャの通り、黄色い背景（class名：second-section）とその下の文字(class名:third-section)が重なっていて、下の文字が読めなくなっている状態です。
どのようにすればsecond-sectionとthird-sectionが重ならなくなりますか？

<div class="second-section">
            <p class="one">まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</p>
            <p class="two">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</p>
            <a href="" class="three">お問い合わせ＆資料請求はこちら</a>
            <p class="four">第４期生：2018年12月３日 ~ 2018年12月22日  ＊締め切りました</p>
            <p class="five">第５期生：2019年４月8日 ~ 2019年4月27日　＊締め切りました</p>
            <p class="six">第６期生：資料請求受付中です</p>
                <div class="SNS_button">
                    <div class="twitter-button">
                        <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">
                        Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                    </div>
                    <div class="facebook-button">
                        <div id="fb-root"></div>
                        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2"></script>
                        <div class="fb-like" data-href="https://isara.life/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
                    </div>
                </div>
        </div>

        <div class="third-section">
            <p class="title">エンジニアとして本当の自由を手に入れるためには？</p>
            <p class="one">エンジニア需要の高まりに伴い、プログラミングスクールが増えています。<br>
                しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p>
            <p class="2">これで本当にいいのですか？<br>
                日本人エンジニアはアメリカと較べて給料が格段に低い。<br>
                その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p>
            <p class="3">スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。<br>
            そこで必要なのが 「稼ぐ力」です。</p>
        </div>

.second-section {
    position: relative;
    text-align: center;
    top: 200px;
    background-color: #EBB94D;
    padding: 35px;
}

.second-section .one,
.second-section .four,
.second-section .five,
.second-section .six {
    color: white;
}

.second-section p {
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.second-section .three {
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    margin: 50px auto;
    background-color: #D84940;
    padding: 35px 290px;
    border-radius: 55px;
    color: white;
}

.second-section .two {
    background-color: white;
    color: #D84940;
    width: 41%;
    border-radius: 6px;
    margin-top: 20px;
}

.second-section .one {
    line-height: 35px;
}

.second-section .four,
.second-section .five,
.second-section .six {
    letter-spacing: 3px;
    font-size: 20px;
    line-height: 60px;
}

.second-section .twitter-button,
.second-section .twitter-button {
    float: left;
    margin-right: 5px;
}

.third-section {
    height: 590px;
}

.third-section .title {
    font-size: 20px;
}

Comments

[aKusano]

画面キャプチャが正しく投稿できていません。
質問を編集してキャプチャ画像を表示するようにしてください。

[退会済みユーザー]

画面キャプチャを修正しました。

Answer 1

.second-section {
    position: relative;
    text-align: center;
    top: 200px;//消す
    background-color: #EBB94D;
    padding: 35px;
}

top: 200px;が位置を下げている可能性があるので、こちらを一度消してみてください。

Comments

[退会済みユーザー]

ご回答ありがとうございます！

Answer 2

LanHmaさんが指摘している通り、 top: 200px と指定しているのがコンテンツ被りの原因ですね。
この指定を削除すれば重なりはなくなります。

.second-section {
    position: relative;
    text-align: center;
    /*top: 200px;*/ ← ★ココ
    background-color: #EBB94D;
    padding: 35px;
}

また、キャプチャを見る限りヘッダーを固定配置にしたいようですね。
おそらくtop: 200pxとしていたのは、初期表示でこのヘッダーに.second-sectionが隠れてしまうのを回避するため、下に下げたかったものと思います。
掲載されている箇所以外のHTMLがどうなっているのか分からないのでベストかどうかは分かりませんが、
固定表示のヘッダーの高さ分だけコンテンツの表示位置を下げる場合は、
body要素やmain要素など、コンテンツを囲む要素に対してmargin-topまたはpadding-topで
余白を確保するのが一般的です。

例えばこうです。

body {
  margin-top: 200px; /*←こっちで余白確保*/
}
.second-section {
  position: relative;
  text-align: center;
  background-color: #EBB94D;
  padding: 35px;
}

Comments

[退会済みユーザー]

ご回答ありがとうございます！
重ならないようにできました！