How to remove horizontal scroll in bootstrap?

Question

Today, I have a problem with bootstrap.

Like this image.

I want to remove horizontal scroll in grid bootstrap.

I think a problem is: I tried to add a slide image with new div.container > div.row contain a child div.container > div.row and I think this problem..

My code like this:

<div class="container">
    <div class="row">
        <div class="container">
            <div class="row"></div> <!-- /.row contain image slider-->
        </div> <!-- /.container contain image slider -->
    </div> <!-- /.row contain content of page-->
</div> <!-- /.container contain content of page-->

But I don't know how to fix this.

You can see my pen at here:

http://codepen.io/r0ysy0301/pen/zKoPAE

Answer 1

You can't insert a container INSIDE a container without changing its width. The container itself has min-width. Reference: http://getbootstrap.com/css/#grid-options

If you badly want to use a container, then use container-fluid.

Reference: http://getbootstrap.com/css/#grid-example-fluid

This is the edited html codes. Hope it helps.

http://www.bootply.com/IsEptxFAGG

Answer 2

The problem is that you have 2 nested .container div elements within your .tab-pane element. The .container class has a mediaquery that sets its width explicitly which makes it larger than the tab-pane.

@media (min-width: 1200px)
.container {
    width: 1170px;
}

You can probably fix it a couple of different ways:

1. You can change the overflow on the .tab-pane from overflow-y: auto to overflow-x: hidden which isn't really a great solution because it simply cuts the content off.

-- OR --

2. You could use a different class instead of the .container so that you are not bound to all of its explicit widths at different breakpoints.