HTML/CSS 送信ボタン反映の仕方

Question

質問失礼します！

現在独学でHTML/CSSを勉強中で、色々検索し試してみても解決しない事があります。
模写ではないので、回答がないので苦戦しております。

下記、送信ボタン(オレンジ色”ReadMore”)を青枠の中に入れて、文章の下に反映させたいです。
青枠からmargin-bottom: 98px;　margin-right: 241px;にしたいのです。
特に送信ボタンのCSSはいじっていないし、HTMLも問題なくかけていると思っているのですが、、、

どのように修正したら、反映できるのかお教えください！

<div id="main_wrapper">            
            <div id="main_image"></div>
            <div id="introduction">
                <h2>Feature</h2>
                <div id="introduction_flex">
                    <img src="./sample.png" alt="働く女性">
                    <div id="feature_intro">
                        <h3>What is “Coding Basics”?</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore 
                            magna aliqua. Ut enim ad minim veniam, quis nostrud 
                            exercitation ullamco laboris nisi ut aliquip ex ea.
                            <br>
                            <br>
                            commodo consequat. Duis aute irure dolor in 
                            reprehenderit in voluptate velit esse cillum dolore eu.
                        </p>
                        <div id="button">
                            <input type="submit" class="btn" value="Read More">                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div id="footer_inner">
                <img src="./LOGO.png">
                <p>© 2020 LOGO All rights reserved.</p>
            </div>
        </footer>

div#main_image {
    width: 100%;
    height: 603px;
    background: url(./fv.png) no-repeat center;
    margin-bottom: 0;
}

div#introduction {
    width: 1000px;
    height: 518px;
    border: 4px solid blue;
    margin: 0 auto;
    margin-bottom: 26px;
}

div#introduction h2 {
    color: black;
    font-size: 32px;
    font-weight: bold;
    padding-top: 40px;
    padding-bottom: 42px;
    margin-left: 442px;
    margin-right: 442px;

}

div#introduction_flex {
    display: flex;
    justify-content: space-between;
}

div#introduction_flex img {
    width: 480px;
    height: 329px;
    margin-left: 20px;
    margin-bottom: 71px;
}

div#feature_intro {
    width: auto;
    height: auto;
    margin-right: 44px;
}

div#feature_intro h3 {
    font-size: 32px;
    font-weight: bold;
    margin-left: 44px;
}

div#feature_intro p {
    width: 394px;
    height: 161px;
    font-size: 16px;
    margin-top: 30px;
    margin-left: 44px;
    margin-bottom: 175px;
    line-height: 24px;

}

div#button {
    margin-bottom: 98px;
    margin-right: 241px;

}


div#button input.btn {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    background-color: #EFA358;
    width: 197px;
    height: 47px;
    border-radius: 10px;
    color: white;
    padding: auto;
    
}

Comments

[nishinoya_eng]

画像とソースが異なるようです。
記載のソースで表示してみるとpタグの直下にボタンが配置されます。
問題が起こっているソースを記載いただいた方が解決しやすいかもしれません。

[missy]

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

画像の入れ替え、そしてHTNL追加表記致しました。
いかがでしょうか？

[nishinoya_eng]

</div>が3つ余っているようですね。今回の問題とは関係なさそうですが。
青い枠線に関するコードの記載が無いようです。
こちら確認することは可能ですか？

[missy]

何度もすみません。長々となるのが申し訳なく、必要かなと思う部分だけを記載しておりました。
今HTML/CSS全部記載させていただきました。

ご確認いただけると嬉しいです！

Answer 1

はみ出ている要因は青枠を構成している#introductionにheightがpxで指定していることに加えて、
feature_intro pにheight,margin-bottomが指定されていることが要因かと思います。
これらを無くしてあげればとりあえずそれなりの形にはなるかと。

ブロック要素は上から配置されていることを意識して適宜余白を調整してあげて下さい。
また、heightをpx単位で指定すると、思わぬ落とし穴にはまることがあります。
このあたりも意識してみると良いと思います。

簡単にcss修正してみました。
参考にして下さい。

div#main_image {
    width: 100%;
    height: 603px;
    background: url(./fv.png) no-repeat center;
    margin-bottom: 0;
}

div#introduction {
    width: 1000px;
    border: 4px solid blue;
    margin: 0 auto;
    margin-bottom: 26px;
}

div#introduction h2 {
    color: black;
    font-size: 32px;
    font-weight: bold;
    padding-top: 40px;
    padding-bottom: 42px;
    margin-left: 442px;
    margin-right: 442px;

}

div#introduction_flex {
    display: flex;
    justify-content: space-between;
}

div#introduction_flex img {
    width: 480px;
    height: 329px;
    margin-left: 20px;
    margin-bottom: 71px;
}

div#feature_intro {
    width: auto;
    height: auto;
    margin-right: 44px;
}

div#feature_intro h3 {
    font-size: 32px;
    font-weight: bold;
    margin-left: 44px;
}

div#feature_intro p {
    width: 394px;
    font-size: 16px;
    margin-top: 30px;
    margin-left: 44px;
    line-height: 24px;

}

div#button {
    margin-bottom: 98px;
    margin-right: 241px;
}


div#button input.btn {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    background-color: #EFA358;
    width: 197px;
    height: 47px;
    border-radius: 10px;
    color: white;
    padding: auto;
}

Comments

[missy]

heightはあえて指定しない場合もあるのですね！
大変勉強になりました！ご丁寧なご回答、本当にどうもありがとうございました！