Sidebar is displaying properly on some pages but not others - css

Question

I can get the sidebar to display properly on some pages but not all. I can't figure out where I've gone wrong.
I've messed around with clearing the floats but I don't fully understand how this works and how to apply it. So the index page displays properly but the about page has the sidebar positioned under the main page content and the space where the sidebar should display is empty.
article::after, #home-two-parts::after {
content:''; display: block; clear: both;
}
#home-main-left {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
/* === HOMEPAGE - Left Top === */
#intro {
margin-bottom: 30px;
}
figure {
margin: 0;
padding: 0;
}
figure img{
display: inline-block;
width: 60%; height: auto;
padding-right: 20px;
}
figcaption {
display: inline-block;
width: 30%;
vertical-align: top;
}
/* === HOMEPAGE - Left Bottom === */
#home-two-parts {
margin-bottom: 50px;
}
#home-two-parts p {
height: 80px;
}
#home-two-parts img {
width: 80%;
height: auto;
}
#about-button, #tutorial-button {
float: left;
width: 45%;
}
#about-button {
margin-right: 30px;
}
/* === ABOUT page ===*/
article::after, #about-extra-two::after {
clear: both;
}
#About {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
#about-textWrap img {
float: left;
margin: 0 1em 1em 0;
display: inline-block;
width: 40%; height: auto;
padding-right: 20px;
}
#about-videos {
padding-bottom: 20px;
}
.video {
display: inline-block;
width: 100%;
height: auto;
text-align: center;
}
.video-caption {
text-align: left;
float: right;
display: inline-block;
margin-bottom: 20px;
}
#links {
width: 100%;
padding: 0 10px 0 10px;
}
#more, #directory {
float: left;
width: 30%;
height: 250px;
margin-left: 45px;
padding: 15px;
background-color: #f0c1e6;
overflow: auto;
}
#extra-two {
margin-bottom: 50px;
}
#extra-two h3 {
text-align: center;
color: #ffffff;
background: #191970;
}
#extra-two p {
height: 80px;
width: 70%;
}
#extra-two li {
padding-bottom: 10px;
}
#links {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
#links ul {
width: 100%;
text-align: left;
margin: 20px;
padding-bottom: 20px;
}
#links li {
list-style: circle;
}

Answer 1

Guys thanks for your reply, I fixed it!
I looked through the guide to posting a "Minimal Reproducible Example" and decided to go back to square one and check for syntax errors, comparing the pages that work with the pages that didn't.
On each problem page, there was an element positioned incorrectly outside of the main content section that was blocking my sidebar from floating.
Even though you guys didn't "fix" my problem, you made me stop and think, go back to basics and work it out for myself, which is far more valuable because I feel like I really learned something. Thank you! ^_^