Lightbox移动页面

Question

我在我的网站上实施了一个灯箱。它的工作效果很好，除了这个事实，当灯箱打开时，它会将页面内容向左移动一点。任何解决方案如何解决？

HTML     

        <div class="tab-pane active odstavec" id="rekonstrukce">
        <div class="row">
            <div class="col-sm-4 text-center">
                <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                  <img class="img-responsive" src="img/rekonstrukce/pic1.jpg" alt=""> 
                </a>                  
            </div>
            <div class="col-sm-4 text-center">
              <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                <img class="img-responsive" src="img/rekonstrukce/pic2.jpg" alt="">
              </a>
            </div>
            <div class="col-sm-4 text-center">
              <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                <img class="img-responsive" src="img/rekonstrukce/pic3.jpg" alt="">
              </a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 text-center">
              <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                <img class="img-responsive" src="img/rekonstrukce/pic4.jpg" alt="">
              </a>
            </div>
            <div class="col-sm-4 text-center">
              <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                <img class="img-responsive" src="img/rekonstrukce/pic5.jpg" alt="">
              </a>
            </div>
            <div class="col-sm-4 text-center">
              <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                <img class="img-responsive" src="img/rekonstrukce/pic6.jpg" alt="">
              </a>
            </div>
        </div>  
        </div>

        <div class="tab-pane active odstavec" id="rodinne_domy">
        <div class="row">
            <div class="col-sm-4 text-center">
                <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                  <img class="img-responsive" src="img/rodinne_domy/pic1.jpg" alt=""> 
                </a>                  
            </div>
            <div class="col-sm-4 text-center">
              <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                <img class="img-responsive" src="img/rodinne_domy/pic2.jpg" alt="">
              </a>
            </div>
            <div class="col-sm-4 text-center">
              <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                <img class="img-responsive" src="img/rodinne_domy/pic3.jpg" alt="">
              </a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 text-center">
              <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                <img class="img-responsive" src="img/rodinne_domy/pic4.jpg" alt="">
              </a>
            </div>
            <div class="col-sm-4 text-center">
              <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                <img class="img-responsive" src="img/rodinne_domy/pic5.jpg" alt="">
              </a>
            </div>
            <div class="col-sm-4 text-center">
              <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                <img class="img-responsive" src="img/rodinne_domy/pic6.jpg" alt="">
              </a>
            </div>
        </div>  
        </div>  
          <div class="clearfix"></div>

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


    <div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
            <div class="modal-content">
                <div class="modal-body">
                    <img src="" alt="" />
                </div>
            </div>
      </div>  
    </div>

CSS

body {
    padding: 30px 0px;
   overflow-y: auto !important;
}

#lightbox .modal-content {
    display: inline-block;
    text-align: center;   
}

#lightbox .close {
    opacity: 1;
    color: rgb(255, 255, 255);
    background-color: rgb(25, 25, 25);
    padding: 5px 8px;
    border-radius: 30px;
    border: 2px solid rgb(255, 255, 255);
    position: absolute;
    top: -15px;
    right: -55px;

    z-index:1032;
}

.lightbox-caption {
  position: absolute;
  right: 12px;
  bottom: 11px;
  left: 11px;
  padding: 2%;
  font-size: 14px;
  line-height: 18px;
  color: white;
  text-align: center;
  text-shadow: 0 -1px 0 #000000;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  background: #000;
  background: rgba(0, 0, 0, 0.6);
}