I'm unable to reproduce that.

Test case: http://jsfiddle.net/2cd4j/embedded/result/

It happens in your jsfiddle example too but you can't see it because you don't have any visible reference for the outside container. Here is the same example but with a border added to the outside container.

http://jsfiddle.net/kMnWc/embedded/result/

Note that on my machine, the browser window size must be 787 or higher to see the overflow.

Your border depends on padding. I don't see a usage point with .container inside .container with borders.

I think it would be common with sites that use nested master pages (such as ASP.NET MVC sites). I have a couple of ASP.NET MVC sites where the main layout page has a container with a border that surrounds the entire content area of the page. Pages that use that layout page then have containers in them for positioning of content.

Here's an example: http://www.cfgrace.com

Now that site is still using v3.0.0, but when I change it to v3.0.2 the twitter panel on the right-hand side overflows past the content border at wider page widths. A couple of other sites with similar layouts do the same thing.

Also, it's not the border. Changing the outside container to remove the border and just use a background color demonstrates the same behavior.

http://jsfiddle.net/dQY3t/embedded/result/

If I wasn't clear, I think that your box model depends on padding. You are right about container's fixed width, I'm working on a fix. ;)

hogy lenne közös helyszíneken, hogy a beágyazott mester oldalak (mint például ASP.NET MVC helyek). hogy a gépemen, a böngésző ablak mérete legyen 787 vagy nagyobb, hogy a túlfolyó.

I have this problem too, I change the "width" to "max-width" in the .container and now works fine.

example:
< div class="row">
< div class="col-md-8">
< div class="container">
This content will extends to width size and overflows to the right column.
< /div>
< /div>
< div class="col-md-4">
Content at right side
< /div>
< /div>

I initially changed width back to max-width, but I ended up just refactoring my site to take out the nested containers. I created my own class called "nested-container" to apply the centering and padding that I was getting from the "container" class.

It's definitely the fixed width and the padding. Nested containers worked before because of max-width but when we changed that in a prior release, it stopped working. However, it still didn't work completely because each nested container would become narrower and narrower.

See this example for a solution: http://jsbin.com/IhEZadu/1.

Definitely need more testing and feedback though to see if this works everywhere—outdenting nested containers might not always make sense. I think for the time being we just don't recommend it.

Thoughts from anyone else?

My recommendation is to avoid nested containers.

Fluid containers and rows would fix this (.row -> .container => nesting). :)

2013/12/1 Mark Otto notifications@github.com

See this example for a solution: http://jsbin.com/IhEZadu/1.

Definitely need more testing and feedback though to see if this works
everywhere—outdenting nested containers might not always make sense. I
think for the time being we just don't recommend it.

Thoughts from anyone else?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11436#issuecomment-29563389
.

Zlatan Vasović - ZDroid

At some point, maybe instead of .container it should be called .page-max-width-container or something so people won't nest it. I assumed that .container is for setting the page width and centering it and wouldn't nest it inside another .container.

@carasmo Yeah, something more specific would be nice come v4. Until then, not much to do since negative margin for the nesting would probably screw up some lives 😆.

Okay, closing this out since containers have actually never nested "properly" since v3. Here's the lowdown one more time:

• We used to use max-width on .containers. That screwed up IE8, so we switched to width.
• Since we were using max-width, the nested containers never stayed their intended width—they were always 30px short (the 15px gutters on either side via padding).
• Using width, the nested containers are never short—they're always the correct width, which is where the problem lies for a few situations.

We could scope the width for IE8 only, but that just makes for an even worse edge case. For the time being, we're not going to support those nested containers. If you do wish to use them, add the negative margin as shown in this demo I put together: http://jsbin.com/IhEZadu/1.

Agree with the conclusion, and as mentioned earlier I ended up refactoring my site to remove the nested containers. However, the DOCS should probably be updated to explicitly state that nested containers aren't supported.

Reopening as a docs bug.