javascript – CSS & JS Scalable Header just isn’t appropriate with my parallax scrolling

There’s a brown block there, I attempt to discard it

Right here is my code

HTML

<!-- Begin parallux Space -->
            <part class="parallux-area pt-100 pb-100 relative" data-parallax="scroll" data-image-src="img/paralux-bg.jpg">
                <div class="overlay overlay-bg"></div>
                <div class="container.fullwidth">
                    <div class="row justify-content-center align-items-center">
                        <div class="col-lg-5 col-md-6 col-sm-12">
                            <div class="scale__container--js">
                                <div class="scale__container--js">
                                <h2 class="scale--js">JDM8?
                                <span fashion="coloration: #e7503a; "font-family: Mont-Daring">Who</span> are we?</h2>
                            </div>
                            <br>
                            <div class="h5">
                            <h5>A micro design studio that helps you
                                construct identities and experiences
                                to <br> elevate & empower your branding.
                            </h5></div>
                            <div class="p"><p>
                                We're a micro design studio that gives
                                design companies with high quality. <br> We additionally make the design
                                complete heartedly with a purpose to preserve our shoppers <br> glad
                                with the ultimate end result. Shoppers satisfaction is our imaginative and prescient.
                                We strongly imagine by serving to our shoppers obtain and
                                guarantee their success, we may even develop as effectively. <br>
                                <br>
                                <span fashion="font-style: italic">“What you keep centered on will develop.”</span> <br>
                                - Roy T. Bennett                            </p></div>
                            <div class="middle"><a href="#" class="primary-btn d-inline-flex align-items-center"><span class="mr-10">Get Began</span><span class="lnr lnr-arrow-right"></span></a></div>
                        </div>
                        </div>
                    </div>
                </div>
            </part>
            <!-- Finish parallux Space -->

CSS Parallax Space

.parallux-area {
  background-size: cowl;
  background-repeat: no-repeat;
  background-position: left;
  margin: 0;
}

.parallux-area .overlay-bg {
  background: #222;
  opacity: .8;
}

.parallux-area h2 {
  coloration: #fff;
  font-size: 36px;
  font-weight: 100;
}

.parallux-area h2 span {
  font-weight: 600;
}

.parallux-area p {
  coloration: #fff;
  margin-top: 20px;
  margin-bottom: 25px;
}

CSS Scalable Header

.scale__container--js {
  text-align: justify;
  text-align-last: middle;
}

.scale--js {
  show: inline-block;
  transform-origin: 50% 0;
  -webkit-font-smoothing: antialiased;
  remodel: translate3d( 0, 0, 0);
}

JS Scalable Header

operate scaleHeader() {
  var scalable = doc.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.size; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].fashion.remodel = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].fashion.remodel = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.fashion.top = scalable[i].getBoundingClientRect().top + 'px';
  }
} 


// Debounce by David Walsch
// https://davidwalsh.identify/javascript-debounce-function

operate debounce(func, wait, speedy) {
    var timeout;
    return operate() {
        var context = this, args = arguments;
        var later = operate() {
            timeout = null;
            if (!speedy) func.apply(context, args);
        };
        var callNow = speedy && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var myScaleFunction = debounce(operate() {
    scaleHeader();
}, 250);

myScaleFunction();

window.addEventListener('resize', myScaleFunction);

Can anybody please assist me, the place did I’m going unsuitable..?
What I am attempting to do is:

1. Make the header textual content “JDM8 Who Are We” justified within the middle full width
2. Attempt to resize the textual content to suit the complete width of the textual content space
3. Attempt to justify all textual content together with header within the middle

Thanks as soon as once more in superior!