title: bootstrap list-group-item that is a row extends past panel border
body: <p>I am trying to have a grid within in a list-group-item.  It's working but my list-group-item is extending past the panel borders on the left and right.  Can anyone tell me why it's extending past the borders? </p>
  
  <p>Here is the <a href="http://jsfiddle.net/sburke56/nn1h4ocw/" rel="nofollow">jsfiddle</a>. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
      
      &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading h4"&gt;Leagues&lt;/div&gt;
      
        &lt;ul class="list-group"&gt;
          &lt;li class="row list-group-item"&gt;
            &lt;a class="col-sm-2" ng-href="#"&gt;Name&lt;/a&gt; 
            &lt;a class="col-sm-2" ng-href="#"&gt;Tweak Roster&lt;/a&gt;
            &lt;a class="col-sm-2" ng-href="#"&gt;This Week's Matchup&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="row list-group-item"&gt;
            &lt;a class="col-md-3" ng-href="#"&gt;Name&lt;/a&gt; 
            &lt;a class="col-md-3" ng-href="#"&gt;Tweak Roster&lt;/a&gt;
            &lt;a class="col-md-3" ng-href="#"&gt;This Week's Matchup&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>