"margin: 0 auto" is not centering - html

Question

this is driving me crazy... can someone please tell me why the center column simply won't center in between the left and right columns? I'm trying to do that by using margin: 0 auto; on the center column.
$(document).ready(function(){
$("#hide-show").click(function(){
$("#panel").slideToggle();
});
});
.main-wrapper{
margin: 0 auto;
width: 70%;
}
#panel{
width: 100%;
background-color: aqua;
display: none;
position: relative;
float: left;
}
.wrapper{
width: 100%;
}
.images{
width: 100%;
}
#img-1{
background: url("http://lorempixel.com/output/people-q-c-640-480-1.jpg") no-repeat center;
background-size:contain;
height: 300px;
width: 100%;
}
.col {
width: 32%;
float: left;
overflow: hidden;
background: red;
border: 2px solid black;
}
.col:last-child{
float: right;
}
#testing{
background: yellow;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
<button id="hide-show" name="Click me">Click me</button>
<div id="panel">
<div class="wrapper">
<div class="col">
<p>Hello world! 2</p>
<div id="img-1" class="images"></div>
</div>
<div class="col" id="testing">
<p>Hello world! 3</p>
</div>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit
beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque,
voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam,
rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit
beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adi</p>
</div>
</div>
</div>
<p>Hello world! 4</p>
</div>
Here I put a JSFiddle together: JSFiddle
Thank you!

Answer 1

floated elements don't behave well with others
as it's a 3 column output, however, it's an easy fix
in general:
html:
<div class='leftColumn col'> ... </div>
<div class='rightColumn col'> ... </div>
<div class='centerColumn col'> ... </div>
<div class='clearFloats'></div>
css
.col { width:32%; }
.leftColumn { float:left; }
.rightColumn { float:right; }
.centerColumn { margin:0 auto; }
.clearFloats { clear:both; font-size:0; line-height: 0; height:0;}
You'll notice the extra "clearFloats" div ... if you don't clear the floats, strange layout issues can happen (not in this case though, it seems) -
I've posted https://jsfiddle.net/97nbtgtb/1/ which changes your markup/css somewhat like above, didn't add any clearing div, and just changed the css to effectively give the center col no float

Answer 2

margin: 0 auto; will not work here since you have float: left; here.
Increase width of the column to 33.33%. and add box-sizing: border-box;
.col {
width: 33.33%;
float: left;
overflow: hidden;
background: red;
border: 2px solid black;
box-sizing: border-box;
}

Answer 3

I changed your float:left to display:inline-block;
$(document).ready(function() {
$("#hide-show").click(function() {
$("#panel").slideToggle();
});
});
.main-wrapper {
margin: 0 auto;
width: 70%;
}
#panel {
width: 100%;
background-color: aqua;
display: none;
position: relative;
float: left;
}
.wrapper {
width: 100%;
height: 800px;
}
.images {
width: 100%;
}
#img-1 {
background: url("http://lorempixel.com/output/people-q-c-640-480-1.jpg") no-repeat center;
background-size: contain;
height: 300px;
width: 100%;
}
.col {
width: 32%;
height: 100%;
display: inline-block;
overflow: hidden;
background: red;
border: 2px solid black;
}
.col:last-child {
float: right;
}
#testing {
background: yellow;
margin-left: auto;
margin-right: auto;
}
<div class="main-wrapper">
<button id="hide-show" name="Click me">Click me</button>
<div id="panel">
<div class="wrapper">
<div class="col">
<p>Hello world! 2</p>
<div id="img-1" class="images"></div>
</div>
<div class="col" id="testing">
<p>Hello world! 3</p>
</div>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam,
rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adi</p>
</div>
</div>
</div>
<p>Hello world! 4</p>
</div>

Answer 4

So apparently you can't use margin: auto; on floating elements. The answer to this particular case was to add a float: none; the CSS rule for the middle column as JaromandaX stated in the comments. Thanks for the help guys!