受段落標記邊距影響的移動視圖

Question

我在段落標記上設置margin-left/right:300px;以將包含頁眉背景顏色的邊緣推送到文本本身。

當我縮小屏幕時，段落的背景顏色最終會消失，並且這些詞將逐漸移動到屏幕的最右側，直到這些詞語不再存在。

是否有更好的方式來調整背景顏色，使其不佔用整個分配的標題空間？

#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

使用的p你可以把它居中display: table;和margin: 0 auto。其他方式包括在父母上設置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>