1つの親DIV内で他のHTMLタグを使用して3つのDIVSを中央に配置する方法

次のASP.netページにCMSコンテンツブロックがあります。

<div class="section group" style="background: #CCCCCC; overflow: auto;">
    <div class="col span_1_of_3">
    <CMS:ContentBlock ID="ContentBlock5" runat="server" CssClass="test2" DefaultContentID="638" ClientIDMode="Static" />
    </div>
    <div class="col span_1_of_3">
    <CMS:ContentBlock ID="ContentBlock6" runat="server" CssClass="test2" DefaultContentID="638" ClientIDMode="Static" />
    </div>
    <div class="col span_1_of_3">
    <CMS:ContentBlock ID="ContentBlock7" runat="server" CssClass="test2" DefaultContentID="638" ClientIDMode="Static" />
    </div>
</div>

これにより、次のHTMLソースが生成されます。

<div class="section group" style="background: #CCCCCC; overflow: auto;">
    <div class="col span_1_of_3">
    <div id="ContentBlock5" class="test2">
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insurance.aspx?id=473">Most Insurance Plans Accepted</a><br />914-848-5600</span></p>
</div>
    </div>
    <div class="col span_1_of_3">
    <div id="ContentBlock6" class="test2">
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insurance.aspx?id=473">Most Insurance Plans Accepted</a><br />914-848-5650</span></p>
</div>
    </div>
    <div class="col span_1_of_3">
    <div id="ContentBlock7" class="test2">
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insurance.aspx?id=473">Most Insurance Plans Accepted</a><br />914-848-5650</span></p>
</div>
    </div>
</div>

それを表示するCSS：

        .test2
        {
            padding: 8px;
            text-align: left;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
        }
            .test2 p
            {
                text-align: left;
            }
.test1 p {
    text-align: left;
    padding: 0 10px 0 10px;
}
.setP p
{
    text-align: left;
    padding: 10px 10px 0 10px;
}
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    overflow: auto;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 100%;
    }
}

エンドユーザーへの出力は次のとおりです。

画像が示すように、3つのDIVSは中央に配置されていません。

画面サイズに関係なく常に中央に配置されるようにCSSを変更するにはどうすればよいですか。

更新：