title: Bootstrap: `well` inside a `span`/`row` goes beyond its container: how to make it fill "only" width=100% of it?
body: <p>I have a problem with a Bootstrap <code>well</code> going beyond its containing element (here a <code>class="row"</code> , itself in a <code>class="span4"</code>).</p>
  
  <p>It is clearly visible in the JSFidle I did here: <a href="http://jsfiddle.net/sebastien_worms/fc42w/2/" rel="nofollow">http://jsfiddle.net/sebastien_worms/fc42w/2/</a><br>
  And fullscreen : <a href="http://jsfiddle.net/sebastien_worms/fc42w/2/embedded/result/" rel="nofollow">http://jsfiddle.net/sebastien_worms/fc42w/2/embedded/result/</a>  </p>
  
  <p>Extract of the code is here: </p>
  
  <pre><code>&lt;div class="span4 pull-right"&gt;
      &lt;div class="row"&gt;
          &lt;div class="well" style="width:100%;"&gt;
              &lt;b&gt;This is the well that bothers me !&lt;/b&gt;&lt;br&gt; 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"...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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).</p>
  
  <p>... And obviously, I can't set the <code>well</code> in the same <code>div</code> as the <code>span</code>: <a href="http://jsfiddle.net/sebastien_worms/fc42w/3/" rel="nofollow">http://jsfiddle.net/sebastien_worms/fc42w/3/</a></p>
  
  <p>How should I do to have the <code>well</code> fill 100% (only) of the <code>span4</code> ?</p>