Materialize parallax scrolling resize in mobile view? - html

Question

I am having issues with my .parallax CSS class that is done default by the framework it's not resizing like my main image when it comes to mobile view. It works well with a desktop view. They move more to the left the last two images is there a possibility to move them more center? I tried to center them using position: no-repeat fixed center; in CSS or using frameworks default parameters.
https://i.imgur.com/itVR3No.jpg
The image goes off to the left and does not center.
$(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>