How to get rid of gap in progress bar created using bootstrap

Question

I have created a progress bar using the sample code from the bootstrap website. I am getting a gap a the start of the progress bar and i am unable to remove it. I have attached the image to show how it looks.

Here is the code,

    <div class = "form-group">
        <div class = "col-xs-12">
            <h4>In Progress</h4>
        </div>
        <div class="progress progress-striped active col-xs-12">
          <div class="progress-bar col-xs-12"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%; margin-left: 0; margin-right: 0; padding: 0px 0px 0px 0px">
            <span class="sr-only">45% Complete</span>
          </div>
        </div>
        <div class = "col-xs-12">
            <button class = "btn btn-danger col-xs-6 pull-right">Stop</button>
        </div>
    </div>

Answer 1

Put your progress bar within a div with col-xs-12, dont apply col-xs-12 to your progress bar directly, otherwise it will be subject to styles meant for columns (e.g. padding):

Demo Fiddle

<div class="form-group">
    <div class="col-xs-12">
         <h4>In Progress</h4>    
    </div>
    <div class="col-xs-12"> <!-- wrap within a column -->
        <div class="progress progress-striped active">
            <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> 
                <span class="sr-only">45% Complete</span>    
            </div>
        </div>
    </div>
    <div class="col-xs-12">
        <button class="btn btn-danger col-xs-6 pull-right">Stop</button>
    </div>
</div>