Bootstrap columns not working properly - html

Question

I'm having some problems with Bootstrap columns, they are not working the way they are suppose to. In the picture below the 4 profile boxes have to be centered...the same way the 3 columns are centered in the "smart & creative" section. Unfortunately I can't link to a jsfiddle but I have provided code for you to look at below the image, In the code section scroll down for css.
<!-- smart and creative -->
<div class="smart-creative">
<div class="row">
<div class="container">
<div class="title col-xs-12">
<h2>Smart & Creative</h2>
<p>This is why you will use it :)</p>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="circles col-md-4 col-sm-4">
<div class="circle1"></div>
<h4>Multi purpose</h4>
<p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p>
</div>
<div class="circles col-md-4 col-sm-4">
<div class="circle2"></div>
<h4>Flat UI</h4>
<p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p>
</div>
<div class="circles col-md-4 col-sm-4">
<div class="circle3"></div>
<h4>Creative Design</h4>
<p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team">
<div class="row">
<div class="container">
<div class="team-title col-md-12">
<h2>Talented & Experts</h2>
<p>This is our team</p>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="profile-wrapper">
<div class="profiles pic1 col-md-3 col-sm-3">
<div class="pic-holder">
</div>
<div class="desc">
<h5>Mahmoud Baghagho<h5>
<p>Senior UI Designer</p>
</div>
<div class="twitter-button">
<span class="fa fa-twitter">Follow</span>
</div>
</div>
<div class="profiles pic1 col-md-3 col-sm-3">
<div class="pic-holder">
</div>
<div class="desc">
<h5>Mahmoud Baghagho<h5>
<p>Senior UI Designer</p>
</div>
<div class="twitter-button">
<span class="fa fa-twitter">Follow</span>
</div>
</div>
<div class="profiles pic1 col-md-3 col-sm-3">
<div class="pic-holder">
</div>
<div class="desc">
<h5>Mahmoud Baghagho<h5>
<p>Senior UI Designer</p>
</div>
<div class="twitter-button">
<span class="fa fa-twitter">Follow</span>
</div>
</div>
<div class="profiles pic1 col-md-3 col-sm-3">
<div class="pic-holder">
</div>
<div class="desc">
<h5>Mahmoud Baghagho<h5>
<p>Senior UI Designer</p>
</div>
<div class="twitter-button">
<span class="fa fa-twitter">Follow</span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
// Smart and Creative
.smart-creative{
background-color: $theme1-color;
color: white;
.title{
text-align: center;
padding-top: 10px;
p{
color: $header-color;
}
}
.circles{
padding-top: 25px;
h4,p{
text-align: center;
}
p{
color: $header-color;
}
.css-for-circle{
height: 100px;
width: 100px;
background-color: $header-color;
border-radius: 50px;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
.circle1{
background-image: url("../imgs/multi.png");
#extend .css-for-circle;
}
.circle2{
background-image: url("../imgs/flat.png");
#extend .css-for-circle;
}
.circle3{
background-image: url("../imgs/creative.png");
#extend .css-for-circle;
}
}
}
// Team
.team{
background-color: $theme2-color;
.team-title{
h2,p{
text-align: center;
}
}
.profile-wrapper{
margin: 0 auto;
width: 95%;
overflow: hidden;
.profiles{
max-width: 230px;
height: 341px;
background-color: white;
border-radius: 5px;
.pic-holder{
max-width: 164px;
height: 164px;
border-radius: 82px;
background-color: $theme2-color;
margin: 0 auto;
position: relative;
top: 25px;
box-shadow: inset 3px 3px 6px -2px #48804B;
-moz-box-shadow: inset 3px 3px 6px -2px #48804B;
-webkit-box-shadow: inset 3px 3px 6px -2px #48804B;
-o-box-shadow: inset 3px 3px 6px -2px #48804B;
background-image: url("http://placehold.it/147x147");
background-repeat: no-repeat;
background-size: 90%;
background-position: center;
}
.desc{
padding: 45px 0 20px 0;
h5,p{
text-align: center;
}
}
.twitter-button{
max-width: 204px;
height: 43px;
background-color: $theme2-color;
margin: 0 auto;
border-radius: 2px;
.fa-twitter{
font-size: 35px;
color: white;
}
}
}
}
}

Answer 1

First of all, rows should be INSIDE containers.
But your real problem is setting a max-width here:
.profiles{max-width: 230px;}
You're not letting the columns expand to their natural width.

Answer 2

This div:
<div class="container">
should be the one holding:
<div class="row">
The correct way, for example:
<div class="container">
<div class="row">
<div class="title col-xs-12">
<h2>Smart & Creative</h2>
<p>This is why you will use it :)</p>
</div>
</div>
</div>

Answer 3

.team .profile-wrapper .profiles {
max-width: 230px;
}
Is making column width smaller then it should be.
I have created code-pan for you please check
http://codepen.io/payalpatel2299/pen/MbRwxo