Divide the column into 2 parts in Bootstrap 3

Question

I am using a div with class "col-lg-9", inside which div there are two columns with class "col-lg-6" for each of them. it works well, but the problem is there is no field between the columns.

To visually see things, I added a gray background to the main column. Notice how there is no margin between the blue and pink columns.

Please view the problem in this figure:

Direct link: https://dl.dropboxusercontent.com/u/35853519/basmaty-website/index.html

The code:

<div class="main col-lg-9">
    <div class="col-lg-6">

    </div>

    <div class="col-lg-6">

    </div>
</div>

Thank,

Answer 1

You have various options, however I would advise you to start with the main thing for ALL options, here's what:

<div class="main col-lg-9 myHalfCol">
    <div class="col-lg-6">

    </div>

    <div class="col-lg-6">

    </div>
</div>

.myHalfCol, .col-lg-6

, , , , :

.myHalfCol .col-lg-6{padding:0 10px;}

: , .

.myHalfCol .col-lg-6{width:48%; margin:0 1% /* or auto */;}