Bootstrap grid outisde контейнер div

Question

Я пытаюсь положить 2 input внутри сетки бутстрапа, и они находятся за пределами контейнера div, слева или справа.

И все же, код выглядит нормально:

<div style="max-width:500px;margin:auto;"> 
    <div style="background-color:red;"> 
     Test! 
    </div> 
    <div class="row"> 
     <div class="col-sm-6" style="background-color:blue;"> 
      <input name="InputName" type="text" width="100%" placeholder="Your name" style="width:100%;margin: 0; border-radius:0;border: 1px solid rgba(0,0,0,.1);height: 50px;"> 
     </div> 
     <div class="col-sm-6" style="background-color:yellow;"> 
      <input name="InputEmail" type="text" width="100%" placeholder="Your email" style="width:100%;border-radius:0;border: 1px solid rgba(0,0,0,.1);border-left:0;height: 50px;"> 
     </div> 
    </div> 
</div> 

Вот Jsfiddle, красный фон первого col-sm-6 находится вне сНа контейнера слева, и желтый фон второго col-sm-6 находится вне контейнер div справа.

Почему?

Благодарим за помощь.

Answer 1

Это потому, что

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
} 

, а также стили, связанные с вашим Col-см

padding-right: 15px; 
padding-left: 15px;