内容没有以正确的方式集中

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;

然后删除。

  

保证金：0px auto;   填充：0px;

Answer 2

我想以小于760PX的小屏幕为中心3列，其中车身宽度为770 PX 指定属性到容器，如{width: 850 px;}和

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

但一般情况下这不起作用，因为指定的宽度大于实际宽度并超过它，所以没有余地来自动它并居中在div中找到的内容 所以只需指定指定媒体查询的宽度

@media (max-width: 790px) {
  .container {

margin-right: auto;
margin-left: auto;
width: 660px;
}
    }

在大多数情况下，引导程序解决了这个问题，但在这种情况下它会破坏