How do I center 2 divs in HTML Bootstrap? - html

Question

As the title says, how do I center two divs next to each other perfectly?
My HTML: (or well, a bit of it)
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row row-centered">
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
My CSS: (same here, this isn't all)
I tried to make a box for the css above too but it didn't work. http://pastebin.com/SzhAmh3f
Basically the problem I'm having is that the code above works kind of but one of the blocks are a little bit lower than the other and i have no idea why.
Yes, I know that there are other posts about this subject but no one worked for me so I decided to open my own.

Answer 1

There are a lot of unwanted styles actually to achieve this, you simply need the below code on your team-centered class. Remove row-centered class. It should look like this
CSS
.team img {
width: 140px;
height: 140px;
border-radius: 50%;
margin: 10px auto 40px;
}
.team-centered {
width: 50%;
float:left;
text-align: center;
}
HTML
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row">
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>