Bootstrap grid is not center aligned issue

Hi i am using bootstrap library. So, i was trying to make three grids in while building a website. it's responsive but, not enough. And i cannot center align the grids. But, manually it can be done with a customized class or an ID. For an example let's say i'd like to get the view for tablet view... grids are coming like this... This is how it shows. The grid shows five years is not centered enough. it's giving an odd look.

what's the way to get to move the '5years' grid to center when the tablet view is viewd.

I am attaching my code here.

       <!-- Here are all THREE COLUMNS which says about YEARS GRID  -->
<!-- 1st -->
<div class="row text-center center" id="alignment-margin">

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-tn-12 container " id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
      3 years
      <br/>
      <hr id="small-line">
    </h3>
    <p>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
    </p>
    <button class="btn btn-success rounded customize-button" id="tryButton" type="button">
      Try it now for free
    </button>
  </div>
  <!-- SECOND -->
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-tn-12 container " id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
      1 year
      <br/>
      <hr id="small-line">
    </h3>
    <p>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
    </p>
    <button class="btn btn-success rounded" id="tryButton" type="button">
      Try it now for free
    </button>
  </div>
  <!-- THIRD -->
  <div class="col-lg-4 col-md-4 col-sm-4  col-xs-12 col-tn-12 container" id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
      5 years
      <br/>
      <hr id="small-line">
    </h3>
    <p>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
    </p>
    <button class="btn btn-success rounded customize-button" id="tryButton" type="button">
      Try it now for free
    </button>
  </div>
</div>