Centering aside bar with media query - html

Question

I have an aside section that I'd like to have centered using a media query, so that once it's viewed on a mobile, it'll be at the bottom of the page aligned horizontally. Just like this:
This is what it's currently doing:
I have some images and text I don't want to share so I'll change them for this question...
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: white;
}
/*GLOBAL*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header ul {
padding: 0;
margin: 0;
}
.page-title {
font-size: 20px;
}
.page-title-center {
font-size: 20px;
text-align: center;
}
.subheading-center {
font-size: 15px;
text-align: center;
margin-top: 50px;
}
.dark {
padding: 15px;
background: #1CAC4B;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
.dark-center {
padding: 15px;
text-align: center;
background: #1CAC4B;
color: white;
margin: 10px;
}
#hyperlink {
color: #FFEE00;
}
#hyperlinkg {
color: #1CAC4B;
}
/*HEADER*/
header {
background: #1CAC4B;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #FFEE00 3px solid;
display: flex;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0 10px 0 10px;
}
header #branding {
float: left;
}
header #branding-img img {
float: left;
width: 60px;
height: 60px;
padding: 0 20px 20px 0;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 14px;
}
header .highlight, header .current a {
color: #FFEE00 /*YELLOW*/;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*SHOWCASE*/
#showcase {
background:url("../img/grass.jpg") no-repeat;
background-size: cover;
min-height: 450px;
text-align: center;
color: white;
}
#showcase h1 { /**/
margin-top: 150px;
font-size: 60px;
margin-bottom: 10px;
}
#showcase p {
font-size: 30px;
}
/* CONTACT INFO */
#contact {
color: white;
background: #1CAC4B;
padding: 25px;
border-bottom: #FFEE00 3px solid;
border-top: #FFEE00 3px solid;
}
#contact h1 {
float: left;
}
#contact p {
font-size: 20px;
margin-top: 22px;
font-weight: bold;
float: right;
}
/*BOXES*/
.boxes {
background: white; /*Background behind 3 circular images are white */
display: flex; /*Makes circles drop if page is squished */
flex-wrap: wrap; /*Makes circles in a horizontal row */
justify-content: center;
}
.boxes figure {
margin: 3.5%; /*makes it line up better */
text-align: center; /*Puts text in center*/
font-size: 20px;
}
.boxes figure img {
border-radius: 25px; /*Makes images circular */
width: 310px; /*Sets image width*/
height: 220px; /*Sets image height - heigh and width must be same to make it a circular */
box-shadow: gray 0 0 15px; /*Adds gray shadow to bottom of images */
}
/*MAIN-COL*/
article#main-col {
float: left;
width: 70%;
}
/*ABOUT PAGE SIDEBAR*/
aside#about-sidebar {
float: right;
margin-top: 50px;
}
aside#about-sidebar img {
width: 230px;
height: 184px;
/*257px*/
}
/*SERVICES*/
ul#services li {
list-style: none;
padding: 20px;
border: green solid 1px;
margin-bottom: 10px;
background: #e6e6e6;
}
/*SERVICES PAGE SIDEBAR*/
aside#service-sidebar {
float: right;
margin-top: 50px;
}
/*GALLERY SLIDESHOW*/
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
padding: 10px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/*FOOTER*/
footer {
padding: 20px;
margin-top: 20px;
color: white;
background-color: #1CAC4B;
text-align: center;
}
/*MEDIA QUERIES*/
#media(max-width: 768px){
header #branding,
header nav,
header nav li,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
align-content: center;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#showcase h1 {
margin-top: 40px;
}
}
<body>
<main>
<header>
<div class="container">
<div id="branding-img">
<a href="index.html"><img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
</div>
<div id="branding">
<h1><span class="highlight">NAME SHORT</span>NAME</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About The Company</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
</p>
<h1 class="page-title">About Me</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet sapien quis felis imperdiet scelerisque. Maecenas vulputate, nisl quis laoreet efficitur, urna nunc viverra massa, placerat commodo ligula tellus vel lacus. Ut molestie, purus id gravida sollicitudin, ipsum ipsum scelerisque diam, quis hendrerit mauris massa vitae quam. Donec maximus, felis sit amet tincidunt pretium, justo tellus cursus ex, quis vestibulum felis risus sed velit. Vivamus varius sapien sit amet nisl iaculis, et aliquet risus lobortis. In eget ullamcorper augue. If you are interested you can call me using my email or phone number displayed on the <a id="hyperlink" href="index.html">Home</a> page.
</p>
</article>
<aside id="about-sidebar">
<div class="dark">
<img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
<p>
PERSON NAME
</p>
</div>
</aside>
</div>
</section>
<footer>
<p>COMPANY</p>
</footer>
</main>
</body>

Answer 1

Of course, as soon as I spent 10 minutes making this question I figured out my problem within literally 10 seconds lol.
I doubt anyone else would have this problem but you never know, so I'll answer it and leave it here for anyone who needs it.
In the CSS file in the media queries section, I removed '#sidebar' from 'aside#sidebar {'