「要素の空白を埋めたい」「要素の重なりを無くしたい」

Question

前提

HTML/CSSファイルでPC＆モバイルデザイン対応のホームページを作成しています。
「Box配置」「ボタン配置」の機能実装が上手くできなくなりました。

###実現したいこと
・「Box配置の中のタイトルとテキストの空白を詰めて実装したい」
・「ボタン重なり部分をなくして枠に納めたい」

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

「Box配置」
タイトルの上に空白があるのですが、この空白の位置にタイトル要素を移動させて、
タイトル／テキストが2分割されるような実装をしたいです。

「ボタン配置」
ボタンがテキスト／フッターの著作権部分と重なってしまいました。
重なりをなくしてテキスト／ボタンを同じ枠に納めたいです。

該当のソースコード

「Box配置部分のソースコード」

【HTML】
<!-- メイン -->
    <main>
        <h1 class="main-text">テキスト</h1>
        <div class="main-container">
            <div class="box">
            　　<div class="box-title">タイトル</div>
                <p>テキスト</p>
            </div>
            <div class="box">
            　　<div class="box-title">タイトル</div>
                <p>テキスト</p>
            </div>
            <div class="box">
            　　<div class="box-title">タイトル</div>
                <p>テキスト</p>
            </div>
            
        </div>
    </main>


【CSS】
/* main
------------------------------------------------------------*/

.main-text {
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 0.5rem;
}

/* BOX タイトル＆テキスト  */

.main-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.box {
    width: 33.333%;
    margin: 1em;
    border: 1px solid white;
    background-color: lightgray;
}

.box-title {
    font-size: 2rem;
    font-weight: 400;
    background-color: #87cefa;
}

「ボタン配置部分のソースコード」

【HTML】
<!-- フッター -->
    <footer>
        <div class="footer-container">
            <p>テキスト</p>
            <div class=content>
                <a class="button" href="#">ボタン</a>
                <i class="fas fa-chevron-square-right"></i>
                <!-- a href="#"でページトップへ移動する -->
            </div>
        <div class="footer">
            <small class="text-center uppercase">&copy; 〇　〇　name, All Rights Reserved.</small>
        </div>
        </div>
    </footer>


【CSS】
/* footer
------------------------------------------------------------*/

.footer-container {
    background: #8a2be2;
}

.footer-container p {
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 0.5rem
}

.content {
    display: block;
    text-align: center;
}

.button {
    width: 20rem;
    padding: 1em;
    font-size: 1.6rem;
    color: #ffffff;
    background: #0e3466;
    transition: .3s;
    border-radius: 30em;
}

.footer {
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
    color: #ffffff;
    background-color: #87cefa;
}

試したこと

「Box配置」
・検索しましたが現時点の自分のボキャブラリーではヒットしませんでした。

「ボタン配置」
・position指定で動かそうとしましたが、上に動かすと今度はテキスト部分と重なってしまいました。

補足情報（画像URL）

【現状画像】
https://gyazo.com/b0889b113c34636aa1fa8228fca2136b

【Box配置でやりたいこと】
https://gyazo.com/c6aa200b15dd82aa562ad3223deebba0

###メッセージ
初歩的な内容で申し訳ないのですが、現時点での自身のボキャブラリーでは解決策がヒットせず、うまくできないので教えていただきたいです。
宜しくお願い致します。

Answer 1

「Box配置」

なんかdivの前に全角が入っているような？
消してみたらタイトル前の隙間は消えると思います。

　　<div class="box-title">タイトル</div>

「ボタン配置」
インライン要素（aタグ）にはpaddingの上下が効きません

<a class="button" href="#">ボタン</a>

a.button{display:inline-block;}

あたりで上下paddingが効くようにしてみてはいかがでしょうか。

Comments

[hiyoko_000001]

＞recal様

ご丁寧にご回答頂きありがとうございます。
ご教示頂いた内容通り変更したところなおりました！
本当にありがとうございました。