Expected behavior I am using a form on my landing page. I want to make the form left aligned for large and medium screens and center aligned when the size of the screen is small. I am not being able to achieve that effect. The desired effect works perfectly for the h1 title in my code -

<h1 class="h1-responsive quicksand font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Get Your Cooky In 2 minutes! </h1>

Actual behavior

Resources (screenshots, code snippets etc.) My Code

<div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
      <!-- Content -->
      <div class="container">
        <!--Grid row-->
        <div class="row">
          <!--Grid column-->
          <div class="col-md-6 mb-5 white-text text-center text-lg-left">
            <h1 class="h1-responsive quicksand font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Get Your Cookie In 2 minutes! </h1>
            <!-- <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s"> -->
            <h6 class="wow fadeInLeft" data-wow-delay="0.3s">Try it. Now!</h6>
            <br>
            <!-- <div class=""> -->
            <form id="search-form" class="md-form form-inline mb-3 text-center">

              <input class="form-control form-control-sm mr-3 w-75" type="search" id="search6" aria-label="Search by lesson or topic" mdbInput>

              <label for="search6">Search by lesson or topic</label>
              <button type="button" size="sm" mdbBtn color="primary" mdbWavesEffect>Get Tests</button>

            </form>
          <!-- </div> -->
          </div>
       </div>
    </div>
</div>