Gridで色をつけた部分を中央に持っていきたい

Question

###前提・実現したいこと
Gridで色をつけた部分を中央に持っていきたいが左寄せのままである。

###発生している問題・エラーメッセージ
特にエラーは発生していない。

###該当のソースコード
htmlに

    <div class="col-sm-8">
        {% for product in products.all %}
            <h4> {{ product.product_title }}</h4>
            {{ product.image|safe }}
            <p> {{ product.body }} </p>

        {% endfor %}
    </div>

cssに

.col-sm-8{
    background-color: black;
}

と書いた。

###試したこと
htmlに

    <div class="col-sm-8 text-center">

   <div class="col-sm-8 center-block">

と書いたが左寄せにはならず、背景色も消えてしまった。

Answer 1

divごとセンタリングしたいということでしょうか？
それであればこれで可能です。

.col-sm-8{
    background-color: black;
    width: 400px;
    margin:0px auto;
}

文字だけセンタリングしたいということであればこれで可能です。

.col-sm-8{
    background-color: black;
　　text-align: center;
}