Bootstrap css center nested div - html

Question

I'm havent been front end coding for quite a while, havent been coding at all for quite a while. Now i'm trying some things again and i'm kinda stuck at something and hoping you folks could help me out :)
I've got a bootstrap row with nested divs. I want to center align the nested div's but can't seem to figure out how. Is there anyone able to push me in the right direction? My code is as follows:
<!--Features block Start-->
<div class="row">
<div id="features" class="col-sm-12">
<div class="row">
<div class="col-sm-3 features-content"><img class="center" src="img/icons/ssd.png" alt="ssd"><h3 class="center">SSD.</h3><p class="center">Placeholder text.</p></div>
<div class="col-sm-3 features-content"><img class="center" src="img/icons/network.png" alt="network"><h3 class="center">Network.</h3><p class="center">Place holder text</p></div>
<div class="col-sm-3 features-content"><img class="center" src="img/icons/database.png" alt="database"><h3 class="center">Database.</h3><p class="center">Placeholder text.</p></div>
</div>
<div class="row features-content">
<div class="col-sm-3 features-content"><img class="center" src="img/icons/opensource.png" alt="ssd"><h3 class="center">We <span class="glyphicon glyphicon-heart heart-color"></span> Open Source.</h3><p class="center">Placeholder text.</p></div>
<div class="col-sm-3 features-content"><img class="center" src="img/icons/cpanel.png" alt="network"><h3 class="center">CPanel.</h3><p class="center">Placeholder text.</p></div>
<div class="col-sm-3 features-content"><img class="center" src="img/icons/support.png" alt="database"><h3 class="center">24/7 Support.</h3><p class="center">Placeholder text.</p></div>
</div>
</div>
</div>
<!--Features block Stop-->
with the following CSS
#features{
background-color:#e1dbc5;
position: relative;
}
#features-content{
margin: 0 auto;
}
which results in: http://i.imgur.com/AhJKjkE.png
Anyone able to shed some light on this for me? If there is anything unclear or you need more information from me please ask!
Kind regards,
Arjen.

Answer 1

#features-content{
margin: 0 auto;
text-align:center;
}
#features{
background-color:#e1dbc5;
position: relative;
text-align:center;
}
text-align center on both ID's

Answer 2

actually it is much easier if you use the default grid for more nesting to get your design right
<div class="row">
<div id="features" class="col-sm-12" style="text-align:center;">
<div class="row">
<div class="col-sm-4 features-content">
<img class="center" src="img/icons/ssd.png" alt="ssd">
<h3 class="center">SSD.</h3>
<p class="center">Placeholder text.</p>
</div>
<div class="col-sm-4 features-content">
<img class="center" src="img/icons/network.png" alt="network">
<h3 class="center">Network.</h3>
<p class="center">Place holder text</p>
</div>
<div class="col-sm-4 features-content">
<img class="center" src="img/icons/database.png" alt="database">
<h3 class="center">Database.</h3>
<p class="center">Placeholder text.</p>
</div>
</div>
<div class="row features-content" style="text-align:center;">
<div class="col-sm-4 features-content">
<img class="center" src="img/icons/opensource.png" alt="ssd">
<h3 class="center">We <span class="glyphicon glyphicon-heart heart-color"></span> Open Source.</h3>
<p class="center">Placeholder text.</p>
</div>
<div class="col-sm-4 features-content">
<img class="center" src="img/icons/cpanel.png" alt="network">
<h3 class="center">CPanel.</h3>
<p class="center">Placeholder text.</p>
</div>
<div class="col-sm-4 features-content">
<img class="center" src="img/icons/support.png" alt="database">
<h3 class="center">24/7 Support.</h3>
<p class="center">Placeholder text.</p>
</div>
</div>
</div>
</div>
check this