Can't get these div's to center - html

Question

I am trying to get these div's to center (all 3 next to each other to be in the center of the page), however I cannot get them to center.
Here is how they look, as an example: http://callum.website/
Code:
HTML
<div class="containercontainer">
<div class="containerleft">
<figure class="image-container">
<img src="https://d13yacurqjgara.cloudfront.net/users/430915/screenshots/2031943/untitled-7_1x.png" alt="eSportsy - eSports PSD Template" width="400" height="300">
<figcaption class="clearfix">
<h4>eSportsy - FREE PSD Template</h4>
<p>in <font color="0ead99"><B>FREEBIES</B></font></p>
Download
</figcaption>
</figure>
</div>
<div class="container">
<figure class="image-container">
<img src="https://d13yacurqjgara.cloudfront.net/users/430915/screenshots/2031943/untitled-7_1x.png" alt="eSportsy - eSports PSD Template" width="400" height="300">
<figcaption class="clearfix">
<h4>eSportsy - FREE PSD Template</h4>
<p>in <font color="0ead99"><B>FREEBIES</B></font></p>
Download
</figcaption>
</figure>
</div>
<div class="containerright">
<figure class="image-container">
<img src="https://d13yacurqjgara.cloudfront.net/users/430915/screenshots/2031943/untitled-7_1x.png" alt="eSportsy - eSports PSD Template" width="400" height="300">
<figcaption class="clearfix">
<h4>eSportsy - FREE PSD Template</h4>
<p>in <font color="0ead99"><B>FREEBIES</B></font></p>
Download
</figcaption>
</figure>
</div>
body{
background: #F3F3F3;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
color: #2A2A2A;
}
h4 {
color: #fff;
margin: 0;
padding: 0;
}
p {
margin: 0;
}
.containercontainer{
width: 66%;
margin: 0 auto;
max-width:100%;
text-align: center;
}
.containerleft {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
float:left;
}
.container {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
}
.containerright {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
float: right
}
.container a{
text-decoration:none;
}
.container img{
bottom: 0;
display: block;
height: auto;
max-width: 100%;
}
.button {
background: #0084b4;
border-radius: 3px;
color: #fff;
display: inline-block;
font-weight: bold;
padding: 4px 8px;
position: absolute;
right: 20px;
top: 30px;
}
.button:hover {
background: #2D76B9;
color: #fff;
}
.dlbutton {
background: #0ead99;
border-radius: 3px;
color: #fff;
display: inline-block;
font-weight: bold;
padding: 4px 8px;
position: absolute;
right: 20px;
top: 30px;
}
.dlbutton:hover {
background: #0eb49f;
color: #fff;
}
.image-container {
border: 6px solid #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
overflow: hidden;
position: relative;
width: 400px;
}
.image-container img {
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.image-container:hover img {
-webkit-transform: translateY(-45px);
-moz-transform: translateY(-45px);
-ms-transform: translateY(-45px);
-o-transform: translateY(-45px);
transform: translateY(-45px);
}
.image-container:hover figcaption {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform .4s, opacity .1s;
-moz-transition: -moz-transform .4s, opacity .1s;
-ms-transition: -ms-transform .4s, opacity .1s;
-o-transition: -o-transform .4s, opacity .1s;
transition: transform .4s, opacity .1s;
}
.image-container figcaption {
background: #283449;
bottom: 0;
color: #fff;
height: 50px;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
-moz-transition: -moz-transform .4s, opacity .1s .3s;
-ms-transition: -ms-transform .4s, opacity .1s .3s;
-o-transition: -o-transform .4s, opacity .1s .3s;
transition: transform .4s, opacity .1s .3s;
width: 360px;
}

Answer 1

You just need to remove the margin-left from .image-container.
.image-container { margin-left:0; }

Answer 2

Change the size of containerright (from CSS) from 66% to 92%. This will align all the divs in center as well as wouldn't disturb page responsiveness.

Answer 3

Remove:
float: left;
float: right;
and they become centered.

Answer 4

.containerright {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
...
margin:0 auto; // add this
}
Do the same for other container too Which is in centre