pタグ、h1タグの要素の横幅はデフォルトでは親要素の横幅に合わせられています。
<body><h1>hello world.</h1><p>hello world.</p></body>
h1{background:skyblue;/* デフォルトの状態
display: block */}p{background:pink;/* デフォルトの状態
display: block */}
これはpタグ、h1タグはデフォルトのdisplayプロパティの設定がblockとなるためです。
pタグ、h1タグのようなデフォルトのdisplayがblockの要素の横幅を文字数に合わせて設定する場合は以下のようにCSS設定をします。
h1{background:skyblue;display:inline-block;}p{background:pink;display:inline-block;}