Bootstrap Why are my columns wider than the container -

i can't figure out why 4 columns put wider container in. can tell me how fix code group of column fits inside parent container?

thanks.

<div class="container">   <div class="row">     <div class="col-md-3">       <a href="#" class="btn">button</a>     </div>     <div class="col-md-3">       <a href="#" class="btn">button</a>     </div>     <div class="col-md-3">       <a href="#" class="btn">button</a>     </div>     <div class="col-md-3">   <a href="#" class="btn">button</a>    </div>   </div>  </div>    body{ margin:0; padding:0; }  .container{  padding:0;  margin: 0 auto;  border:solid 1px blue;  width:100%;  } .col-md-3{  border:solid 1px red;  padding:0;  margin:0 auto;  }  .col-md-3 .btn{ display:block; border: 1px solid green; 

are making own css bootstrap?

you may want try theme , edit way - think can after adding padding rows.

try css:

body{ margin:0; padding:0; }  .container{  padding:0;  margin: 0 auto;  border:solid 1px blue;  width:100%;  } .row { padding:0.5%; } .col-md-3{  border:solid 1px red;  padding:0;  margin:0 auto;  }  .col-md-3 .btn{ display:block; border: 1px solid green;