How to align columns to center on smaller screens using inline-block (responsive)

Question

My row with columns works great, but on smaller screens it is aligned to left, which should be centered. I have tried hundreds tutorials without any positive results. It must be simple, thx in advance for any help :)

HTML:

  <div class="container">
    <div id="offer" class="row">
      <div class="column">
        <div class="box">
        </div>
      </div>
      <div class="column">
        <div class="box">
        </div>
      </div>
      <div class="column">
        </div>
      </div>
    </div>
  </div>  

CSS:

    /* Offer start Section*/
.container {
    text-align:center;
    margin:0 auto;
  }
.container .row {
    display:inline-block;
    vertical-align: middle;
    float: none;
  }
.column {
    width: 33.33%;
    padding-right: 0;
    padding-left: 0;
    margin: -10px;
  }
@media screen and (max-width: 767.98px) {
    .column {
      width: 100%!important;
    }
}    
@media screen and (max-width: 991.98px) {
    .column {
    width: 50%;
    }
}
.row {
    text-align:center;
    margin:0 auto;
}
.row .column {
    display:inline-block;
    vertical-align: middle;
    float: none;
}
  /* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.box {
    width: 300px;
    padding: 10px;
    margin: 30px;
    box-shadow: 0px 0px 10px 1px rgba(136, 136, 136, 0.226);
    border-radius: 30px 30px 30px 30px;
    border: 0px solid #fff;
    text-align: center;
}

I was trying to do it as a grid, inline-grid and other different styles. Inline-block works perfect, but not responsive. Probably the solution is simple. THX!

Answer 1

I'm not sure if you really do need to change your row to get the result you are after try the following: https://jsfiddle.net/s4qkgjeL/1/

The only thing to change was adding position: relative and display: inline-block to .box because you already have a width and a margin set for this class adding the two mentioned properties will ensure they are always centre aligned.

    /* Offer start Section*/
.container {
    text-align:center;
    margin:0 auto;
  }
.container .row {
    display:inline-block;
    vertical-align: middle;
    float: none;
  }
.column {
    width: 33.33%;
    padding-right: 0;
    padding-left: 0;
    margin: -10px;
  }
@media screen and (max-width: 767.98px) {
    .column {
      width: 100%!important;
    }
}    
@media screen and (max-width: 991.98px) {
    .column {
    width: 50%;
    }
}
.row {
    text-align:center;
    margin:0 auto;
}
.row .column {
    display:inline-block;
    vertical-align: middle;
    float: none;
}
  /* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.box {
    position: relative;
    display: inline-block;
   
    width: 300px;
    padding: 10px;
    margin: 30px;
    
    box-shadow: 0px 0px 10px 1px rgba(136, 136, 136, 0.226);
    border-radius: 30px 30px 30px 30px;
    border: 0px solid #fff;
    text-align: center;
}

<div class="container">
  <div id="offer" class="row">

    <div class="column">
      <div class="box"></div>
    </div>

    <div class="column">
      <div class="box"></div>
    </div>

    <div class="column">
      <div class="box"></div>
    </div>

  </div>
</div>