在移动视图中实现视差滚动调整大小？

Question

我的.parallax CSS类遇到问题，该类由框架默认完成，在移动视图中，其大小不像我的主图像那样调整。它在桌面视图下工作良好。它们向左移动更多，最后两幅图像是否有可能将它们移动至更多中心？我试图在CSS中使用position: no-repeat fixed center;或使用框架的默认参数来将它们居中。 https://i.imgur.com/itVR3No.jpg

图像向左偏斜并且不居中。

$(document).ready(function() {
  $('.parallax').parallax();
});

.ha-bg-parallax {
  background: url(https://i.imgur.com/YqK1Oeu.jpg) no-repeat fixed center;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  height: 100vh;
  margin: 0 auto;
  width: 100%;
  display: table;
  vertical-align: middle;
}

.parallax{
  position: no-repeat fixed center;
  max-width:100%;
}

.ha-bg-parallax .ha-parallax-body {
  display: table-cell;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<div class="navbar-fixed">
  <nav class="blue darken-1">
  
  </nav>
</div>
<div class="ha-bg-parallax text-center block-marginb-none" data-speed="20" data-type="background">
  <div class="ha-parallax-body">
    <div class="section scrollspy row title" id="home">
    </div>
  </div>
</div>
<div class="section light-blue lighten-5">
  <div class="row container">
    <div class="section scrollspy" id="info">
    </div>
  </div>
</div>
<div class="parallax-container">
  <div class="parallax"><img alt="header1" src="https://i.imgur.com/QFPutVs.jpg"></div>
</div>
<div class="section light-blue lighten-5">
  <div class="section scrollspy" id="portfolio">
  </div>
  <!--row for parallax-->
</div>
<div class="parallax-container">
  <div class="parallax"><img alt="header2" src="https://i.imgur.com/gyYRcBK.jpg"></div>
</div>
<!--Floating Action Button custumize-->
<footer class="page-footer blue darken-1">
  <div class="col l4 offset-l2 s12 container center">
    <div class="section scrollspy" id="links">
    </div>
  </div>