Bootstrap: two column centered - html

Question

I'm trying to have a two-column centered layout with Bootstrap 3.1.
I've read this: How do I center a Bootstrap div with a 'spanX' class?, but the content is stil aligned to the left. Here is my HTML:
<div class="row">
<div class="center">
<div class="col-lg-3 gauche">
Left div
</div>
<div class="col-lg-5 corps">
Right div
</div>
</div>
</div>
And my CSS:
body
{
padding: 0;
margin: 0;
}
.corps
{
background-color: white;
}
.contenu
{
margin-top: 5em;
margin-bottom: 1em;
background-color: white;
padding: 1.2em;
padding-left: 1.5em;
}
.center
{
float: none;
margin-left: auto;
margin-right: auto;
}
.gauche
{
background-color: #e6e6e6;
min-height: 200px;
}
Result is here: http://i.imgur.com/5nhZ2WS.png

Answer 1

You would want to use a column offset class. If you are using a stock build of Bootstrap all of the column classes need to add up to 12. Your col-lg-3 and col-lg-5 only add up to 8 so adding a col-lg-offset-2 should fix you up to center. Also, bootstrap has a built in centering class container i personally would use that. See below code:
<div class="container">
<div class="row">
<div class="col-lg-3 col-lg-offset-2 gauche">
Left div
</div>
<div class="col-lg-5 corps">
Right div
</div>
</div>
</div>

Answer 2

Add a container, remove the center div and add two blank col-lg-2 on either side so it adds up to 12 columns:
<div class="container">
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-3 gauche">
Left div
</div>
<div class="col-lg-5 corps">
Right div
</div>
<div class="col-lg-2">
</div>
</div>
</div>

Answer 3

For a scalable solution I recommend:
HTML:
<div class="row">
<div class="center">
<div class="col-lg-3 gauche">Left div</div>
<div class="col-lg-5 corps">Right div</div>
</div>
</div>
SCSS:
.center {
display: flex;
flex-direction: row;
justify-content: center;
.col-* {
display: inline-block;
margin-left: -2px; /* Adjust the value of marging work best with your context */
float: none;
}
}
Now it won't matter how many columns (or types of columns) you put in <div class="center"></div>

Answer 4

Try
.row {
margin:0px auto;
}