the heading and sub heading of a slider is not center aligned its working fine all on other screen sizes but in this screen size the heading and subheading floats to the left

```
 @media screen and (min-width:992px) and (max-width:1199px) {

    .position{
      position: absolute;
      padding-top: 240px;
    }
    .swiper-slide{
     text-transform: uppercase;
     letter-spacing: 3px;
     font-size: 60px;
     line-height: 79px!important;
     color: #fff;
    }
    .subtitle{
    font-family: 'Rouge Script', cursive;
    font-size: 40px;
    line-height: 39px!important;
    font-weight: 400;
    color: #fff;
    font-style: italic;
    }

 }

```

i'm using text-center bootstrap class for aligning the text

My HTML 

```
 <div class="item text-center">
      <div class="position col-lg-12">
        <h1 class="swiper-slide">
          <strong>
            welcome to the shop
          </strong>
        </h1>
        <p class="subtitle">
          <span>
            Take your time looking around & don't be shy
          </span>
        </p>
        <p class="top-space">
          <button type="button" class="btn btn-default btn-lg button hvr-float-shadow" id="focus">
            START BROWSING
          </button>
        </p>
      </div>
      <img src="img/front_girl1.jpg">
    </div>

```