html css pタグのwidth指定について

いつもお世話になっております。

表題の件で分からないところがありましたので質問させて頂きました。

今回、divで囲まれたpタグにpaddingを指定すると、親要素幅の幅からはみ出る現象が起きました。

私のイメージだと、pタグにwidth100%、padding：２０pxを指定すると、
親要素の幅の中で、pタグの左右上下に余白を設定することになるという認識だったのですが、何か違うのでしょうか？

下記コードになります。

html
1<!DOCTYPE html>
2<html lang="ja" >
3<head>  
4</head>
5
6<link rel="stylesheet" type="text/css" href="style.css">
7
8<body>
9  <div class="contents_outer">
10    <div class="conternts_inner">
11
12      <div class="headertitle_section">
13        <img src="" alt="2018 お中元">
14        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
15      </div>
16
17    </div><!-- conternts_inner -->
18  </div><!-- contents_outer -->
19
20</body>
21</html>
22

css
1
2*{
3  border: 1px solid blue;
4}
5
6.contents_outer{
7  width: 100%;
8  margin: 0 auto;
9}
10
11
12.contents_outer .conternts_inner{
13  width: 100%;
14  margin: 0 auto;
15}
16
17.contents_outer .conternts_inner .headertitle_section{
18  width: 100%;
19}
20
21.contents_outer .conternts_inner .headertitle_section img{
22  width: 100%;
23}
24
25.contents_outer .conternts_inner .headertitle_section p{
26  width: 100%;
27  padding: 20px;
28}
29