Centering two rows of images

I recently inherited some (messy) code and want to center two rows of images, each row with three images each. I have been trying to figure out why I can't get them to center.

Here's my HTML

    <div class="top1">
        <div class="container" style="background-color:#fff; padding-top:10%; padding-bottom:400px; padding-top:15px; padding-left:30px; padding-right:30px;">
            <div class="row">
                <div class="col-md-2 col-xs-12 inspire_others">
                    <img style="position: relative;" class="img-responsive" src="images/1.jpg" width="100%" height="auto" />
                </div>
                <div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%">
                    <img style="position: relative;" class="img-responsive" src="images/2.jpg" width="100%" height="auto" style="margin-top:5%;" /> <!--width="220px" height="240px"-->
                </div>
                <div class="col-md-2 col-xs-12 inspire_others">
                    <img style="position: relative;" class="img-responsive" src="images/3.jpg" width="100%" height="auto" />
                </div>
            </div>
            <div class="row" style="padding-top: 50px;">
                <div class="col-md-2 col-xs-12 inspire_others">
                    <img style="position: relative;" class="img-responsive" src="images/4.jpg" width="100%" height="auto" style="margin-top:5%;" />
                </div>
                <div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%">
                    <img style="position: relative;" class="img-responsive" src="images/5.jpg" width="100%" height="auto" />
                </div>
                <div class="col-md-2 col-xs-12 inspire_others">
                    <img style="position: relative;" class="img-responsive" src="images/6.jpg" width="100%" height="auto" style="margin-top:5%;" />
                </div>
            </div>
        <br />
        </div>
    </div>

I'm using bootstrap.