Question

I have a problem with a Bootstrap well going beyond its containing element (here a class="row" , itself in a class="span4").

It is clearly visible in the JSFidle I did here: http://jsfiddle.net/sebastien_worms/fc42w/2/
And fullscreen : http://jsfiddle.net/sebastien_worms/fc42w/2/embedded/result/

Extract of the code is here:

<div class="span4 pull-right">
    <div class="row">
        <div class="well" style="width:100%;">
            <b>This is the well that bothers me !</b><br> It goes beyond the right end of the screen ... And if you click "inspect element", you can see it goes beyond the right-end of its containing "span4" and "row"...
        </div>
    </div>
</div>

You can see the well going beyond its containing element (and the screen) when playing with you browser’s window size (around 1000px wide is the most visible).

… And obviously, I can’t set the well in the same div as the span: http://jsfiddle.net/sebastien_worms/fc42w/3/

How should I do to have the well fill 100% (only) of the span4 ?

Answer 1

It’s beacuse your padding, just add this

.well {
    box-sizing: border-box;
}

• It will work in any modern browser and IE8 and newer