折叠时，自举面板中的背景图像会移动

Question

我与Bootstrap的手风琴面板有一个小的造型问题。出于某种原因，当单击第一个面板时，panel-body内的背景图像会暂时推到屏幕右侧。我尝试通过添加margin-left: 0和left: 0来修复它，但它根本没有影响它。我真的很感激任何帮助。感谢

我的HTML：

<div class="panel-group" id="accordion">

                          <div class="panel panel-default">

                            <div id="collapseOne" class="panel-collapse collapse in bgImg1">
                                <div class="panel-body">
                                    <div class="collapse1 ">
                                      <div class="col-md-12 ">
                                        <div class="row">

                                            <div class="col-md-6 col-md-push-6">
                                                <div class="introText">
                                                  <hr />

                                                  <hr />
                                                </div>
                                              </div>

                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                                <div class="bg1 closedPanel activePanel">
                                    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
                                      <h4 class="panel-title caps">
                                        <a>
                                          Hear the News
                                          <span class="glyphicon glyphicon-chevron-down"></span> 

                                        </a>
                                      </h4>
                                    </div>
                                </div>

                          </div> 
                          <!-- end panel -->

                          <div class="panel panel-default">
                            <div id="collapseTwo" class="panel-collapse collapse">
                              <div class="panel-body">
                                <div class="collapse2">
                                    <div class="row">
                                          <div class="col-md-6 col-md-push-6">
                                            <div class="introText">
                                              <hr/>
                                                <h2 class="caps">SEE WHAT WE</h2>
                                                <h1 class="caps">CHANGED</h1>
                                               <hr/>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                             </div>
                          </div>

                            <div class="bg2 closedPanel">

                                    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                      <h4 class="panel-title caps">
                                        <a>
                                          See What We Changed
                                          <span class="glyphicon glyphicon-chevron-down"></span> 
                                        </a>
                                      </h4>
                                    </div>
                            </div>

                          </div> 


                           <!-- end panel -->

                           <div class="panel panel-default">

                            <div id="collapseThree" class="panel-collapse collapse">
                              <div class="panel-body">
                                <div class="collapse3">
                                    <div class="row">
                                        <div class="col-md-6">
                                          <img src="img/coupon-tubs.png" class="tubsCoupon">
                                        </div>

                                        <div class="col-md-6">
                                            <div class="introText">
                                             <hr/>
                                                <h2 class="caps">ENJOY A LITTLE</h2>
                                                <h1 class="caps">INCENTIVE.</h1>
                                            <hr/>
                                          </div>


                                        </div>
                                    </div>
                                </div>
                             </div>
                            </div>

                            <div class="bg3 closedPanel">
                                    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                      <h4 class="panel-title caps">
                                        <a class="coupon">Get A Coupon
                                          <span class="glyphicon glyphicon-chevron-down"></span> 
                                        </a>
                                      </h4>
                                    </div>
                                </div>

                          </div> 
                           <!-- end panel -->

                    </div>

我的CSS

.collapse1{
background: url("../img/bg1.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;
margin-left: 0;
left: 0;

}

.collapse2{
background: url("../img/bg2.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;

}

.collapse3{
background: url("../img/bg3.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;

}

.panel-group{
    margin-top:3px;
}

.activePanel {
  display:none;  
}