My Goal: I am attempting to create a scrolling list on the page. Everything works fine until the last element, which seems to erase all the other elements.
* {
margin: 0;
padding: 0;
font-family: 'Ubuntu';
box-sizing: border-box;
}
body {
background-color: #15192c;
color: #fff;
}
.content {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
text-align: center;
}
.list {
margin: 10em 5em;
font-size: 200%;
}
aside {
flex: 1;
font-size: 500%;
position: sticky;
top: 25%;
height: 100%;
}
.aside h1 {
font-weight: bolder;
font-size: 500%;
}
article {
flex: 2;
height: 120%;
}
#developer {
position: sticky;
top: 4em;
}
#designer {
position: sticky;
top: 6em;
}
#student {
position: sticky;
top: 8em;
}
#learner {
position: sticky;
top: 10em;
}
#entrepreneur {
position: sticky;
top: 12em;
}
#programmer {
position: sticky;
top: 14em;
}
#champion {
position: sticky;
top: 16em;
}
#risk-taker {
position: sticky;
top: 18em;
}
#mistake-maker {
position: sticky;
top: 20em;
}<div class="content">
<aside>
<h1>Hello.</h1>
<p>I'm a</p>
</aside>
<article>
<section class="list" id="developer">
<h2>Developer</h2>
</section>
<section class="list" id="designer">
<h2>Designer</h2>
</section>
<section class="list" id="student">
<h2>Student</h2>
</section>
<section class="list" id="learner">
<h2>Learner</h2>
</section>
<section class="list" id="entrepreneur">
<h2>Entrepreneur</h2>
</section>
<section class="list" id="programmer">
<h2>Programmer</h2>
</section>
<section class="list" id="champion">
<h2>Champion</h2>
</section>
<section class="list" id="risk-taker">
<h2>Risk-Taker</h2>
</section>
<section class="list" id="mistake-maker">
<h2>Mistake-Maker</h2>
</section>
</article>
</div>View it on CodePen: https://codepen.io/jason43/pen/oNvJWYQ