css - 内容没有以正确的方式居中

Question

我正在设计，我想将其内容居中

.container_12 {
    position: relative;
    max-width: 960px;
    margin: 0px auto;
    padding: 0px;
}

.grid_3 {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
    width: 300px;
}

和html如下:

<div class="container_12">
     <div class="row">
         <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 col-xxs-12 grid_3 box-3">
             <h2> </h2>
             <img>
             <div class="inside">
                 <div></div><a></a>
             </div>
         </div>
             and 2 divs in same hierarchy


      </div> 
      </div>

但它没有正确居中 该问题不会在大屏幕上显示，但在较小的屏幕上会显示得很糟糕，请参见图片:

Answer 1

将此应用于容器。

right: 0;
left: 0;
margin-right: auto;
margin-left: auto;

并删除。

margin: 0px auto; padding: 0px;