how to remove the space between bootstrap scrollbars?

Question

I am trying to make a bar chart with bootstrap progress bars. But the problem is there's a space between every two progress bars. I want them to contact each other. Here's my code for one progress bar.

<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%">
  <span class="sr-only">40% Complete (success)</span>
 </div>
</div>

How can I achieve this?

UPDATE Here's my full code

<div>   
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" style="width: 65%">
            <span class="sr-only">40% Complete (success)</span>
        </div>
    </div>

Answer 1

The problem is that by default bootstrap has the following style:

.progress {
    margin-bottom:20px;
}

you can overwrite that by adding in your own stylesheet:

.progress {
    margin-bottom:0;
}

modified jsfiddle