bootstrap list-group-item that is a row extends past panel border

Question

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?

Here is the jsfiddle.

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
    
    <div class="panel panel-default">
      <div class="panel-heading h4">Leagues</div>
    
      <ul class="list-group">
        <li class="row list-group-item">
          <a class="col-sm-2" ng-href="#">Name</a> 
          <a class="col-sm-2" ng-href="#">Tweak Roster</a>
          <a class="col-sm-2" ng-href="#">This Week's Matchup</a>
        </li>
        <li class="row list-group-item">
          <a class="col-md-3" ng-href="#">Name</a> 
          <a class="col-md-3" ng-href="#">Tweak Roster</a>
          <a class="col-md-3" ng-href="#">This Week's Matchup</a>
        </li>
      </ul>
    </div>
    </div>

Answer 1

Change your markup to this

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

<div class="container-fluid">

<div class="container panel panel-default">
  <div class="panel-heading row">
      <h4  class="panel-title col-md-12">Leagues</h4>
  </div>

  <ul class="list-group">
    <li class="row list-group-item">
      <a class="col-sm-2" ng-href="#">Name</a> 
      <a class="col-sm-2" ng-href="#">Tweak Roster</a>
      <a class="col-sm-2" ng-href="#">This Week's Matchup</a>
    </li>
    <li class="row list-group-item">
      <a class="col-md-3" ng-href="#">Name</a> 
      <a class="col-md-3" ng-href="#">Tweak Roster</a>
      <a class="col-md-3" ng-href="#">This Week's Matchup</a>
    </li>
  </ul>
</div>
</div>

or this

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

<div class="container-fluid">

<div class="container panel panel-default">
  <div class="panel-heading">
     <h4  class="panel-title">Leagues</h4>
  </div>

  <ul class="list-group">
    <li class="row list-group-item">
      <a class="col-sm-2" ng-href="#">Name</a> 
      <a class="col-sm-2" ng-href="#">Tweak Roster</a>
      <a class="col-sm-2" ng-href="#">This Week's Matchup</a>
    </li>
    <li class="row list-group-item">
      <a class="col-md-3" ng-href="#">Name</a> 
      <a class="col-md-3" ng-href="#">Tweak Roster</a>
      <a class="col-md-3" ng-href="#">This Week's Matchup</a>
    </li>
  </ul>
</div>
</div>

Answer 2

because of class row - remove it and its negative margin will no longer be applied to the li

<li class="list-group-item">
  <a class="col-md-3" ng-href="#">Name</a> 
  <a class="col-md-3" ng-href="#">Tweak Roster</a>
  <a class="col-md-3" ng-href="#">This Week's Matchup</a>
</li>

is this what you had in mind? FIDDLE