ページからオーバーフローするナビゲーションバー上の余白、マージン/パディング付きの内部コンテナは動作しません

Question

したがって、私は最初から新しいウェブサイトを作成しています。私はこの単純なHTMLがあります。

<div class="navbar"> 
    <div class="page-title">SkillUp</div> 
</div> 

<div class="container"> 

    <!-- PAGE CONTENT INJECTED HERE --> 
    <div ng-view></div> 

</div> 

をそして、私のCSSは次のとおりです。シンプル

html, body{ 
    margin: 0; 
    padding: 0; 
} 

.navbar{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: #197719; 
    width: 100%; 
    height: 80px; 
    z-index: 100; 
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.4); 
    padding: 0 15px; 
} 

.page-title{ 
    position: relative; 
    top: 2px; 
    color: white; 
    font-family: Lobster, cursive; 
    font-size: 54px; 
    text-shadow: -3px 3px 5px rgba(0, 0, 0, 0.6); 
    text-align: center; 
} 

。しかし、パディングが追加されたときのnavbarは、パディング時間2のサイズだけページを横切って伸びています。bodyとhtmlの幅を100％に設定し、別のdivをnavbarの中に入れ、幅を設定するまで100％にしてパディングを追加しますが、それによって外側のナビゲーションバーも大きくなります！私はnavbarからパディングを削除するときにのみ動作しますが、私が作った他のウェブサイトでこの問題はありませんでした！私はそれが働くために内側の要素にマージンを置く必要はありません。 、

Annoying navbar

ヘルプしてください：

はここで何が起こるかの絵です！ありがとう！

Answer 1

.navbarセレクタに

box-sizing: border-box; 

を追加します。