Wyśrodkowanie kontenera, a jego dzieci do lewej

Cześć,
Kombinuję już od godziny jak wyśrodkować kontener którego dzieci mają display: inline-block;.
Chodzi mi o to aby sam kontener został wyśrodkowany a następnie jego dzieci zostały wyrównane do lewej.
Kod którym prawie uzyskałem zamierzony efekt:

.page-content{
	min-height: calc(100vh - 96px);
	background-color: #E9E9E9;
	padding: 10px 15px;

}
.file-container{ /*dziecko*/
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	width: 192px;
	height: 224px;
	display: inline-block;
	margin:0 5px 10px 5px;
}
.file-container .file-preview{
	display: block;
	width: 192px;
	height: 192px;
}
.file-container .file-preview .file-icon{
	padding: 15px 41px;
	font-size: 128px;
	margin: 0 auto;
}
.file-container .file-preview .file-actions-right{
	float: right !important;
	position: relative;
	top: 5px;
	right: 5px;
}
.file-container .file-preview .file-actions-left{
	float: left !important;
	position: relative;
	top: 5px;
	left: 5px;
}
.file-container .file-text-block{
	display: block;
	width: 192px;
	border-top: 1px solid #e9e9e9;
	padding: 5px 10px;
}
.file-container .file-text-block .file-name{
	font-size: 14px;
}
.container-content{ /*rodzic*/
	display: block;
    text-align: -webkit-center;
}

Kod html:

<div class="container-content">
                                    <div class="file-container">
                                        <div class="file-preview">
                                            <div class="file-actions-left">
                                                <input type="checkbox" id="1">
                                                <label for="1"></label>
                                            </div>
                                            <div class="file-actions-right">
                                                <i class="material-icons pink-text text-accent-2">folder</i>
                                                <i class="material-icons pink-text text-accent-2">delete</i>
                                            </div>
                                            <i class="fa fa-file-pdf-o file-icon" aria-hidden="true"></i>
                                        </div>
                                        <div class="file-text-block">
                                            <div class="file-name truncate grey-text">
                                                file.jpg
                                            </div>
                                        </div>
                                    </div>
                                </div>

Lecz przy nim niestety ostatnie elementy nie były wyrównane do lewej co wyglądało szpetnie.
Dodam że w tych boxach będzie wyświetlana głównie grafika.

Tak jak pisałem z powyższymi stylami cała zawartość jest wyśrodkowana. Niestety ostatnie również.
Zapomniałem dodać że container-content jest w kolumnie 50% strony.
http://www.awesomescreenshot.com/image/1422394/89b2cd293a7d9f67b9ed53763e838f7a

Dodaj to do swojej klasy rodzica i będziesz miał na środku strony swój główny kontener.

.container-content
{ /*rodzic*/
    display: block;
    width: 192px;
    height: 224px;
    text-align: -webkit-center;
    margin: 0px auto 0px auto;
}

albo stwórz dodatkowego diva przed tą .file-container klasą i w nim ustaw atrybuty margin: 0px auto 0px auto; i display: block;