I have encountered a specific issue that I can't seem to find a solution for. I am attempting to include the text "2017 Indie" at the bottom of the page. When I apply margin-top to a pixel value, the text remains unchanged and nothing happens. However, when I use margin-bottom, it creates additional white space above my current division which is not the desired outcome. I am unsure of what the problem may be.
html,
body {
height: 100%
}
* {
margin: 0;
}
.sect1 h1 {
font-size: 100px;
color: white;
margin-top: 150px;
padding: 0;
display: inline-block;
}
.sect1-1 {
text-align: center;
}
.sect1-text {
text-align: center;
}
.sect1 p {
font-size: 40px;
color: white;
margin-top: 250px;
padding: 0;
display: inline-block;
}
.text3-1 {
text-align: center;
margin-top: 100px;
display: block;
}
.text3-1 p {
font-size: 100px;
color: white;
background: blue;
padding: 50px;
display: inline-block;
}
#p1 {
top: 540px;
padding-left: 520px;
color: white;
font-size: 42px;
}
#p2 {
top: 840px;
padding-left: 220px;
color: white;
font-size: 24px;
}
#p3 {
color: black;
top: 2935px;
padding-left: 665px;
}
iframe {
position: absolute;
}
.sect {
height: 100%;
background-size: cover;
background-attachment: fixed;
}
.subSect {
height: 51.75%;
background-color: orange;
margin: 0;
}
.sect1 {
background-image: url("images/image4.jpg");
}
.sect2 {
background-image: url("images/image5.jpg");
}
.sect3 {
height: 100%;
background-size: cover;
background-image: url("images/image2.jpg");
}
script {
padding-left: 250px;
}<div class="sect sect1">
<div class="sect1-1">
<h1>Indie</h1>
</div>
<div class="sect1-text">
<p>What music</p>
</div>
</div>
<div class="subSect">
<div class="text">
<p>This is about....</p>
</div>
</div>
<div class="sect sect2">
</div>
<div class="subSect"></div>
<div class="sect3">
<div class="text3-1">
<p>2017 Indie</p>
</div>
</div>