Horizontal-fix for stepper not working

Expected behavior Whole form should be visible on the webpage. Actual behavior I have a long form that I want to put in the horizontal stepper. I added the horizontal fix to css, js, and html class. the form is still getting cut off. Im not sure how to fix this. Resources (screenshots, code snippets etc.)

{{!-- Stepper --}}
<ul class="stepper horizontal horizontal-fix" id="horizontal-stepper-fix">
    <li class="step active">
        <div class="step-title waves-effect waves-dark">Step 1</div>
        <div class="step-new-content">
            <div class="form-row">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input type="text" id="materialRegisterFormName" class="form-control">
                        <label for="materialRegisterFormName">Participant's Name</label>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input type="text" id="materialRegisterFormPrimaryContactName" class="form-control">
                        <label for="materialRegisterFormPrimaryContactName">Primary Contact's Name</label>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input type="text" id="materialRegisterFormGuardian1" class="form-control">
                        <label for="materialRegisterFormGuardian1">Parent or Guardian 1</label>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input type="text" id="materialRegisterFormGuardian2" class="form-control">
                        <label for="materialRegisterFormGuardian2">Parent or Guardian 2</label>
                    </div>
                </div>
            </div>

            <!-- Address -->
            <div class="md-form mt-0">
                <input type="text" id="materialRegisterFormAddress" class="form-control">
                <label for="materialRegisterFormAddress">Address</label>
            </div>

            <!-- Phone number -->
            <div class="md-form">
                <input type="text" id="materialRegisterFormPhone" class="form-control"
                    aria-describedby="materialRegisterFormPhoneHelpBlock">
                <label for="materialRegisterFormPhone">Phone number</label>
            </div>

            <h6>Participant or Guardian's Email</h6>
            <!-- E-mail -->
            <div class="md-form mt-0">
                <input type="email" id="materialRegisterFormEmail" class="form-control">
                <label for="materialRegisterFormEmail">E-mail</label>
            </div>

            <h6>Participant's Birthdate</h6>
            <div class="md-form">
                <input placeholder="Click in the text area to select a date" type="text" id="date-picker-example"
                    class="form-control datepicker">
                <label for="date-picker-example"></label>
            </div>

            <!-- Age -->
            <div class="md-form mt-0">
                <input type="text" id="materialRegisterFormAge" class="form-control">
                <label for="materialRegisterFormAge">Age</label>
            </div>

            <h6 class="font-weight-bold">Participant's Photo</h6>
            <div class="file-upload-wrapper mb-4">
                <input type="file" id="input-file-photo" class="file-upload" />
            </div>


        </div>
    </li>
    <li class="step">
        <div class="step-title waves-effect waves-dark">Step 2</div>
        <div class="step-new-content">
            <div class="row">
                <div class="md-form col-12 ml-auto">
                    <input id="password-horizontal" type="password" class="validate form-control" required>
                    <label for="password-horizontal">Your password</label>
                </div>
            </div>
            <div class="step-actions">
                <button class="waves-effect waves-dark btn btn-sm btn-primary next-step"
                    data-feedback="someFunction21">CONTINUE</button>
                <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
            </div>
        </div>
    </li>
    <li class="step">
        <div class="step-title waves-effect waves-dark">Step 3</div>
        <div class="step-new-content">
            Finish!
            <div class="step-actions">
                <button class="waves-effect waves-dark btn-sm btn btn-primary m-0 mt-4"
                    type="button">SUBMIT</button>
            </div>
        </div>
    </li>
</ul>

css, ul.horizontal-fix li a { padding: .84rem 2.14rem; }

js, function someFunction22() { setTimeout(function () { $('#horizontal-stepper-fix').nextStep(); }, 2000); }