Container Fluid Not Centered

I just want my columns to be centered but there's just too much space on the right side no space on the left.

Thank you but my problem with that is the columns are too close to each other even when I add paddings?

you have to override the padding for the columns (don't use !important) I had to use because the snippet wouldn't work, set the value as you like it more for the padding.

Also it's not centered on smaller screens

To align center use bootstrap class text-center,

Note: plus I used col-xs-4 but only for demo here, if you want to have one column only, use col-xs-12 or col-sm-12

[class*="col-"] {
  padding: 050px!important
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet" /><divclass="pad-section"id="about"><divclass="container"><h1class="text-center">COMPANIES</h1><divclass="row"style="margin: 150px 0 100px 0;"><divclass="text-center col-xs-4 col-lg-4"><divclass="ih-item square effect6 from_top_and_bottom"><ahref="#"><divclass="img">
              Image with hovering effect
            </div><divclass="info"><h3>Title</h3><p>Description</p></div></a></div></div><divclass="text-center col-xs-4 col-lg-4"><divclass="ih-item square effect6 from_top_and_bottom"><ahref="#"><divclass="img">
              Image with hovering effect
            </div><divclass="info"><h3>Title</h3><p>Description</p></div></a></div></div><divclass="text-center col-xs-4 col-lg-4"><divclass="ih-item square effect6 from_top_and_bottom"><ahref="#"><divclass="img">
              Image with hovering effect
            </div><divclass="info"><h3>Title</h3><p>Description</p></div></a></div></div></div></div></div>

Share