Bootstrap 3: ¿por qué la clase de fila es más ancha que su contenedor?

Acabo de comenzar a usar Bootstrap 3. Estoy teniendo dificultades para entender cómo funciona la clase de fila. ¿Hay alguna forma de evitar el padding-lefty padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

En todos los sistemas de cuadrícula, hay canaletas entre cada columna. El sistema de Bootstrap establece un relleno de 15px tanto a la izquierda como a la derecha de cada columna para crear este canal.

El problema es que la primera columna no debería tener media canaleta a la izquierda y la última no debería tener media canaleta a la derecha. En lugar de utilizar algún tipo de .firsto .lastclase sobre esas columnas como algunos sistemas de red hacen, en lugar de establecer la .rowclase de los márgenes son negativos que coinciden con el relleno de las columnas. Esto "tira" de las canaletas de la primera y última columna, mientras que al mismo tiempo la hace más ancha.

El .rowdiv nunca debería usarse para contener nada más que columnas de cuadrícula. Si es así, verá el contenido cambiado en relación con cualquier columna, como es evidente en su violín.

ACTUALIZAR:

Modificó su pregunta después de que respondí, así que aquí está la respuesta a la pregunta que está haciendo ahora: Agregue la .containerclase a la primera <div>. Ver ejemplo de trabajo .

Con bootstrap 3.3.7 este problema se resuelve envolviendo el .row con .container-fluid.

Vea mi respuesta a continuación a una publicación similar.

¿Por qué bootstrap .row tiene un margen izquierdo predeterminado de -30px?

Básicamente, usa "clearfix" en lugar de "fila". Hace exactamente lo mismo que "fila" excluyendo el margen negativo.

Usé la clase de fila dentro de la clase de contenedor y todavía tenía algún problema. Cuando agregué margin-left: auto; margin-right: auto;a la .rowclase funcionó bien.

@Michelle M. debería recibir todo el crédito por esta respuesta.
Ella dijo en uno de los comentarios:

Agregar la clase 'mx-auto' en bootstrap 4 solucionó el problema de desbordamiento para mí.

Necesitaría actualizar su primer divelemento así:

<div class="row mx-auto" style="background:#000000">

No es necesario hacer esto para todas las filas anidadas (si las tiene).
Simplemente agregue mx-autoa la más externa row(o Filas) para evitar la barra de desplazamiento vertical.
No anule el comportamiento de todas las filas de Bootstrap agregando una clase "fila" para reemplazar los márgenes.

Para futuros desarrolladores que depuren este problema:

Bootstrap establece el relleno para las columnas de la fila, por lo que ninguno de los contenidos de una fila debe aparecer fuera del contenedor. Si está experimentando esto y está usando el sistema de cuadrícula de bootstrap correctamente usando las clases col -..., es probable que tenga CSS adicional en algún lugar restableciendo el relleno en las columnas.