Wyśrodkowanie divów - problem z rodzicem

Witam, zacząłem się bawić RWD z własnym prostym grindem i mam problem ze środkowaniem divow. Chcialbym wysrodkowac te 3 divy z clasa col-3. Ogolnie srodkowanie elementow nie jest moją mocną stroną więc jakby ktoś chciałby to wytłumaczyć co tutaj zepsułem byłbym wdzięczny. Oto część kodu.
 

<div id="container">
        <div class="row">
            <div class="col-12">
                <h1>Naglowek</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <i class="icon-gift"></i>
                <p>Tekst</p>
            </div>
            <div class="col-3">
                <i class="icon-umbrella"></i>
                <p>Tekst</p>
            </div>
            <div class="col-3">
                <i class="icon-mail"></i>
                <p>Tekst</p>
            </div>
        </div>
    </div>

#container{
    min-height: 60%;
    background-color: #A79F9F;
    text-align: center;
    padding: 20px;
    width: 100%;
}

#container div div {
    display: inline-block;
}

#container h1{
    padding:10px;
}

#container i{
    font-size:100px;
}

Grind jest podstawowy, tylko width w procentach.

Wiem że gdybym diva z clasa row potraktował jako container (i tak pewnie powinienem zrobic ) to wszystko by działało ale nie wiem dlaczego i dlatego chciałbym się dowiedzieć :P