7.1 Summary carousel appears off-center at smaller screen sizes

Site URL: https://www.elizameadows.com/home

Hi,

For some reason, the summary carousel at the bottom of this page is shifting off-center at narrower page widths and on tablet. It is not a problem on mobile, for some reason. I tried removing all of the code, and it still displays incorrectly.

Here is the current code:

.summary-excerpt {
  margin-top:-40px!important;
   h1 {
     font-family:'Arno Pro', arno-pro, serif!important;
      color:#7e7853!important;
     font-size:10rem!important;
     padding-bottom:0!important;
     margin-bottom:-50px!important;
   }
  }
.summary-carousel-pager {
  float: none!important;
width: 90px!important;
position: absolute!important;
bottom: -12%!important;   
  left: 50%!important;
-webkit-transform: translate(-50%)!important;
-ms-transform: translate(-50%)!important;
transform: translate(-50%)!important;
-webkit-box-pack: center!important;
-ms-flex-pack: center!important;
justify-content: center!important;
z-index: 9!important;
}
  .content-wrapper {
    padding-bottom:90px!important;
  }
}
.sqs-gallery-design-carousel .sqs-gallery { 
  transition: transform ease 1s,-webkit-transform ease 1s!important;
}

Any suggestions much appreciated!

Hi. Do you still need help?

Also I see white bar on right of screen on tablet.

@tuanphan Yes, I do still need help! Any suggestions?