左右のpadding

Question

今、1冊ですべて身につくHTML&CSSとWebデザイン入門講座という本の教材に書かれてあるとおりにコードを書いています。
header class=wrapperという要素に対して、max-width:1100px;margin:0 auto;padding:0 4%;を指定しているのですが、paddingが明らかに4%を超えています。つまり.wrapperの中に要素を入れたときに明らかに4%を超えて中央よりに表示されてしまうということです。リセットCSSやpadding:0;margin:0;を掛けても変わりません。何か原因があるのでしょうか。教えていただけると幸いです。

現象を再現できるHTMLとCSSを提示します。

HTML
heade内に<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">を記述。

<header class="page-header wrapper"> <h1><a><img class="logo src=画像></a></h1> <nav> <ul class="main-nav"> <li><a>News</a></li> <li><a>Menu</a></li> <li><a>Contact</a></li> </ul> </nav> </header>

CSS
*{
padding:0px;
margin: 0px;
}

html{
font-size:100%;
}

body{
line-height: 1.7;
}

a{
text-decoration: none;
}

img{
max-width:100%;
}

.logo{
width:210px;
margin-top:14px;
}

.main-nav{
display:flex;
font-size:1.25rem;
margin-top:34px;
list-style:none;
}

.main-nav li{
margin-left:36px;
}

.page-header{
display:flex;
justify-content: space-between;
}

.wrapper{
max-width:1100px;
margin:0 auto;
padding:0 4%;
}

Comments

[hatena19]

その現象の再現できるHTMLとCSSを提示してください。

[m.ts10806]

＞本の教材をの指示に従って
全ての人が同じ書籍を利用するわけではないですし
「どういう指示があるのか」分からないとどういう方向性で応えればよいのか誰も分かりません。
要件不明瞭です。

Answer 1

おそらく、パーセンテージで指定するときの基準が「その要素の幅」だと勘違いしているのでは。なので、「最大でも1100pxにしかならないheader要素の幅の4%よりも、明らかに大きなpaddingが取られているのでおかしい」と思ったのでしょう。

実際には、CSSのパーセンテージで指定するときの基準は、その要素の親要素(コンテナー)の幅です。親要素の幅の4%がpaddingとして取られます。たとえば、body要素直下にheader要素を書き、ブラウザーのウィンドウサイズを変更すれば容易に確認できるでしょう。

なお、幅をどのように計算するかは、box-sizingで変わります。