Center a div element within body

Question

Markup for the div that I'm trying to center within the body. I want the centering to occur at 768px.

<div class="aside">
  <h2>CONNECT WITH ME</h2>
  <hr>
  <ul>
    <li><a href="https://stackoverflow.com/users/7637603/cerrach"><img style="height: 75px; width: 75px" src="assets/images/stack.png" alt="Stack Overflow"></a></li>
    <li><a href="https://github.com/cerrach"><img style="height: 75px; width: 75px" src="assets/images/git.png" alt="Github"></a></li>
    <li><a href="https://www.linkedin.com/in/christopher-cerrachio-131030138/"><img style="height: 75px; width: 75px" src="assets/images/in.png" alt="LinkedIn"></a></li>
  </ul>
</div>

Styling for said div

.aside{
  float: right;
  margin-right: 10px;
  margin-top: 20px;
  width: 40%;
  background: #7EA8BE;
  border-bottom: 3px solid #C2948A;
  padding: 5px;
  color: #fff;
  font-family: 'Antic Slab', sans-serif;
 }

Media Query for said div

@media screen and (max-width: 768px){

 .aside{
   width: 90%;
   clear: left;
   margin: 0 auto;
  }
 }

I've looked extensively for a remedy for why this div is not centering itself, but all I can really find is the margin: 0 auto; answer.

If all of this is not enough information, I implore you to clone this repository.

https://github.com/cerrach/Responsive-Portfolio.git

Answer 1

The reason .aside is not centering is due to the fact that it has float: left on it.

Remove the float by adding float: none to the media query, and it will work properly.

See the below working snippet:

.aside{
  float: right;
  margin-right: 10px;
  margin-top: 20px;
  width: 40%;
  background: #7EA8BE;
  border-bottom: 3px solid #C2948A;
  padding: 5px;
  color: #fff;
  font-family: 'Antic Slab', sans-serif;
 }
 
 @media screen and (max-width: 768px){
 .aside{
   width: 90%;
   float: none;
   clear: left;
   margin: 0 auto;
  }
 }

<div class="aside">
  <h2>CONNECT WITH ME</h2>
  <hr>
  <ul>
    <li><a href="https://stackoverflow.com/users/7637603/cerrach"><img style="height: 75px; width: 75px" src="assets/images/stack.png" alt="Stack Overflow"></a></li>
    <li><a href="https://github.com/cerrach"><img style="height: 75px; width: 75px" src="assets/images/git.png" alt="Github"></a></li>
    <li><a href="https://www.linkedin.com/in/christopher-cerrachio-131030138/"><img style="height: 75px; width: 75px" src="assets/images/in.png" alt="LinkedIn"></a></li>
  </ul>
</div>

Answer 2

You need to remove the float:

@media screen and (max-width: 768px){

 .aside{
   width: 90%;
   float: none;
   margin: 0 auto;
  }
}

P.s. instead of imploring to clone a ripo, simply create a snippet here on SO :)