パディング垂直位置での奇妙な動作の左

私はそれを奇妙な振る舞いを理解するのに苦労しています。したがって、このdivにはいくつかの段落があり、div内でパディングを左に設定すると、段落だけが左揃えになるのではなく、すべての段落が左揃えになるように設定すると、段落も上に押し上げられます。それらも垂直に上に配置します。何が起こっているのかをテストしてみましたが、親divに適用するパディングが残っているほど、div内の段落が一番上に押し上げられるようです。パディング-左に関するW3C標準を調べて、マージンの上下との関係があるかどうか、または要素の上下の位置に影響するかどうかを確認しましたが、何も見つかりませんでした。また、何が起こっているのかを理解するのに役立つスタックオーバーフローに何かがあるかどうかを確認してみましたが、それも見つかりませんでした。

div内の段落にマージントップを追加して必要な段落を取得することで問題を解決できると確信していますが、それは私が探している解決策ではありません。親divに左のパディングを適用すると、段落の子が右にプッシュされるだけでなく、divに適用する左のパディングが多いほど上に配置されるのはなぜですか？誰かがそのようなものに出くわしたことさえありますか？

更新：問題をよりよく説明するためのコードは次のとおりです。

HTML：

<div id="home-page">
    <div id="intro-page" class="animated FadeInLeft">
        <canvas class="animated fadeInUp" id="canvas"></canvas>

        <p class="animated fadeInUp" id="p1">Lorem ipsum dolor sit amet,  <br> consectetuer adipiscing elit!</p>
        <p class="animated fadeInUp" id="quote">“consectetuer adipiscing elit, <br>no, and WOW! consectetuer adipiscing elit.” <br> consectetuer adipiscing elit</p>
        <hr class="animated fadeInUpBig">
    </div>
</div>

Css：「イントロページ」の問題のdiv。そのcsspadding-leftルールにコメントがあります。私が何を意味するかを見るためにそれを変更してください

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}



body {
background-color: #000;
}

#home-page {
height: 100vh;
width: 100%;

}

#intro-page {
width: calc(100% - 120px);
height: 100vh;
background: url(images/light-bulb.jpeg);
background-size: cover;
display: inline-block;
vertical-align: top;
overflow-y: hidden;
padding-left: 5%;  /* Change this padding to 50%   and see what I 
mean*/
}

#intro-page:before {
content: "Hello!";
color: #ffffff;
position: absolute;
left: 6%;
top: 20%;
font-size: 700%;
animation: upAndDown 6s linear infinite;
font-family: 'PT Serif', serif;
}

@keyframes upAndDown {
0% {
    transform: translateY(-20%);
}

50% {
    transform: translateY(0%);
}


100% {
    transform: translateY(-20%);
}
}

#intro-page p {
color: #bababa;
font-family: 'Roboto Condensed', sans-serif;
}

#intro-page #p1 {
font-size: 240%;
margin-top: 26%;
line-height: 50px;
}

#intro-page #quote {
margin-top: 5%;
font-size: 110%;
font-weight: 300;
letter-spacing: 1px;
}

#intro-page hr {
width: 32%;
margin-top: 2%;
}