空きスペースが増え続けていますが、その理由がわかりません

Question

質問の画像: 質問の画像

前の画像を見ると、そこに大きな空きスペースがあることがわかります。通常のディスプレイ (約 1200 ピクセル) を使用している場合は、すべて問題ありません。ただし、幅を縮小すると、常に空きスペースが増加しますが、なぜこれが発生するのかわかりません。

画面に通常表示される画像: 通常表示される画像

コードがわかりやすく書けるように、HTMLとCSSのコードの一部をアップロードします。

.about-me{
マージントップ: 10px;
最大幅: 100%;
最大高さ: 100%;
高さ: 100vh;
}

.about-me h1{
色: アキノキリンソウ;
テキスト整列: 中央;
フォントサイズ: 52px;
}

.about-me .about{
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;
}

.about-me .about .text-container{
最大幅: 70%;
}

.about-me .about .text-container p{
フォントサイズ: 24px;
テキスト整列: 中央;
マージン: 50ピクセル;
}

.about-me .about .text-container スパン{
色: アキノキリンソウ;
フォントの太さ: 900;
}

。国境{
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;

ボーダー: 1px ソリッドアキノキリンソウ;
背景色: セイタカアワダチソウ;
境界半径: 50%;

マージン: 0 50px;
最大幅: 100%;
}

.about-me .border img{
最大幅: 100%;
最大高さ: 100%;
境界半径: 50%;
スケール: 95%;
ボックスシャドウ: 0 0 10px rgba(0, 0, 0, 0.2);
}

<div class="about-me" id="about-me">
    <h1>私たちは何ですか? </h1>
    <div class="about">
        <div class="テキストコンテナ">
            <p>テキスト</p>

            <p>テキスト</p>

            <p>テキスト</p>
        </div>

        <div class="border">
            <img src="img/arcos.jpg" alt="">
        </div>
    </div>
</div>

Answer 1

問題が分かりました。巨大な空きスペースは、.about-me div の max-width: 100%; 属性によって発生します。この属性は、div の幅をコンテナの 100% に設定するようにブラウザに指示します。ただし、コンテナの幅が狭くなった場合でも、div は 100% の幅を維持しようとするため、空のスペースが作成されます。

この問題を解決するには、max-width: 100%; 属性を .about-me div から削除します。これにより、div がコンテンツの幅に基づいて縮小され、空のスペースがなくなります。