<p>質問の画像: 質問の画像</p> <p>前の画像を見ると、そこに大きな空きスペースがあることがわかります。通常のディスプレイ (約 1200 ピクセル) を使用している場合は、すべて問題ありません。ただし、幅を縮小すると、常に空きスペースが増加しますが、なぜこれが発生するのかわかりません。 </p> <p> 画面に通常表示される画像: 通常表示される画像</p> <p>コードがわかりやすく書けるように、HTMLとCSSのコードの一部をアップロードします。 </p> <p><br /></p> <pre class="brush:css;toolbar:false;">.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); }</pre> <pre class="brush:html;toolbar:false;"><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></pre> <p><br /></p>