My final div (well, not really final as I plan to add more divs) is moving upwards with the page (trying to adjust the height). I can't figure out why this is happening, especially since my second div is working perfectly fine. Link here:
HTML
.indexthird {
width: 100%;
height: 40%;
background-image: url("http://vitas.sk/1/images/indexthird.jpg");
background-size: cover;
background-repeat: no-repeat;
min-height: 300px;
}
.indexthirdbbg{
background-color: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
text-align: center;
padding-top: 7%;
}
.itquotes{
font-size: 1.5vw;
}
.itautor {
font-size: 1vw;
margin-top: 1%;
text-align: center
} <div class="indexthird"><div class="indexthirdbbg">
<i class="itquotes">"„Kým budu ľudia masakrovať zvieratá, budú zabíjať aj jeden druhého.<br> Ten kto seje vraždu a bolesť, nemôže vypestovať radosť a lásku.“"</i>
<p class="itautor">Pythagoras</p>
</div>
</div>