段落タグの余白の影響を受けるモバイルビュー

Question

段落タグにmargin-left/right:300px;を設定すると、含むヘッダーの背景色のエッジをテキスト自体にプッシュします。

画面を縮小すると、最終的に段落の背景色が消え、単語がなくなるまで徐々に画面の右端に移動します。

割り当てられたヘッダースペース全体を占有しないように、背景色を調整するより良い方法はありますか？あなたはそれを中心に保つことができるp上display: table;とmargin: 0 autoを使用して

#educationhead p { 
 
    color: orangered; 
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 
    background: rgba(54, 25, 25, .75); 
 
    margin-left:300px; 
 
    margin-right:300px; 
 
}

<header id="educationhead" class="section-header"> 
 
    <h2 class="section-title"><span>Education</span></h2> 
 
    <div class="spacer"></div> 
 
    <p id="edupara1" class="section-subtitle">Bla Bla Bla Text</p> 
 
</header>

Answer 1

。他の方法としては、親にtext-align: center;を設定するか、またはpに特定の幅を与えてmargin: 0 auto;を実行する方法があります。

#educationhead p { 
 
    color: orangered; 
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 
    background: rgba(54, 25, 25, .75); 
 
    display: table; 
 
    width: auto; 
 
    margin: 0 auto; 
 
}

<header id="educationhead" class="section-header"> 
 
    <h2 class="section-title"><span>Education</span></h2> 
 
    <div class="spacer"></div> 
 
    <p id="edupara1" class="section-subtitle">Bla Bla Bla Text</p> 
 
</header>