予期しないパディングの動作 - Flexbox

Question

ページ上にフッターを置く簡単なnav要素があります。

このアイテムにパディングを追加すると、エレメントは指定のパディングの量だけ縮小します。

通常、要素にパディングを追加すると、実際の要素は縮小されません。 box-sizing: border-boxは、パディングが合計幅に含まれていることを確認していますが、親の幅は100％にしています。

同じ問題は、ヘッダーまたはフッター要素では発生していません。

本当にここでは非常に混乱しています。

Codepen：https://codepen.io/emilychews/pen/opZjEr

/* NAV ABOVE FOOTER */ 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
#footer-nav { 
 
    position: relative; 
 
    width: 100%; 
 
    padding: 0 5%; 
 
    box-sizing: border-box; 
 
} 
 

 
ul#footer-nav-items { 
 
    margin: 0; 
 
    padding: 1rem 1rem 1rem 0; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    background: yellow; 
 
} 
 

 
ul#footer-nav-items li { 
 
    list-style-type: none; 
 
    padding-right: 1.44rem; 
 
}

<nav id="footer-nav"> 
 
    <ul id="footer-nav-items"> 
 
    <li class="footer-menu-item">Home</li> 
 
    <li class="footer-menu-item">Privacy/Terms</li> 
 
    <li class="footer-menu-item">Contact</li> 
 
    </ul> 
 
</nav>

Answer 1

のnav要素は、あなたのパディングに縮小されていません。それはwidth: 100%のままです。

あなたは、黄色の背景色に基づいてnav要素の幅を判断していることがあります。

nav要素ではなく、ulに黄色の背景が適用されています。