Padding Left weird behavior on vertical position

I'm having a hard time figuring it out a weird behavior. So, I have this div with a couple paragraphs, and when I set the padding left within the div so I have all paragraphs left aligned, instead of just the paragraphs being left-aligned, they also get pushed up to the top as if I'm positioning them vertically up as well. I tried testing to see what's going on, it seems like the more padding left I apply to the parent div, the more the paragraphs within the div get pushed up to the top. I tried looking at W3C standards about padding-left to see if there is any relationship with margin top and/or bottom or if it affects the top and bottom position of elements, and I found nothing about. Also, tried see if there is anything here on stackoverflow that can help me figure out what's going on and couldn't find it either.

I'm sure I can fix the problem by applying more margin top to the paragraphs within the div to get the paragraphs where I want, but that's not the solution I'm looking for. I want to know why does applying padding-left to the parent div, not just pushes it's paragraph children to the right, but also position them up to the top the more padding-left I apply to the div? Has anybody even come across something like that?

UPDATE: Here is the code for better explanation of the problem:

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: The div in question in "intro-page". There is the comment in its css padding-left rule. Change it to see what I mean

* {
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%;
}