Bootstrap responsive grid issue

Question

I've setup a bootstrap grid like so :

<div class="row">

 <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  <!-- content -->
 </div>

 <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  <!-- content -->
 </div>

 <!-- More cols -->
</div>

The number of cols to display on each grid row should depend on screen size so I find it difficult to specify more div class="row" or do div clearfix to insert breaks. That's why all cols are inside the same div class="row".

It all works fine in mobile view (width < 500) and desktop/tablet landscape (width > 1024), but in between those widths the row + cell content goes beyond the screen with horizontal scrolling and thus the images doesn't center align.

You can see it live here if you resize your width to around 700-750. I've been trying to debug why this is happening, but I can't figure out what I'm doing wrong. Anyone care to help?

Answer 1

You Define min width in "#header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper"

{background: #fff none repeat scroll 0 0;
min-width: 960px;
width: 100%;}

Remove this min-width.

Second Thing you add width your Custom CSS for add.css Line No.6 this width remove or add max-width & try.

.container {
margin: 0 auto;
width: 960px;}

Answer 2

If you are talking about 700-750px then simply remove the max-width from .container class and also from remove max-width from this #header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper .

I have edited my answer but please go with lalji's answer..