Why are these buttons so far apart? - html

Question

I have six buttons underneath an alert, why are they so spaced out? This is what they look like in a normal browser, and this is what I'd like them to look like.
#import url(http://fonts.googleapis.com/css?family=Cabin|Lobster);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
html, body { background-color: #108A93; }
.row { text-align: center; }
.header { font-family: "lobster", arial; }
.alert-info { background-color: #4D3A7D; border: none; color: white; }
.disabled { cursor: default; }
.btn-default { color: #444; }
span, p, h1, strong, button { color: white; }
span, p, button { font-family: "Cabin", arial; }
button { border: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-xs-4"> <button class="btn btn-primary btn-block">Scrounge Cash</button> </div>
<div class="col-xs-4"> <button class="btn btn-default btn-block">$0.00</button> </div>
<div class="col-xs-4"> <button class="btn btn-default btn-block">$0.00/s</button> </div>
</div>
<div class="row">
<div class="row">
<div class="col-xs-4"> <button class="btn btn-primary btn-block">Pray to Demeter</button> </div>
<div class="col-xs-4"> <button class="btn btn-default btn-block">0</button> </div>
<div class="col-xs-4"> <button class="btn btn-default btn-block">0/s</button> </div>
</div>
</div>
</div>
</div>

Answer 1

There is a padding on boostrap by default, 15px from each side. adding the class no-padding solve the gap.
#import url(http://fonts.googleapis.com/css?family=Cabin|Lobster);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
html, body { background-color: #108A93; }
.row { text-align: center; }
.header { font-family: "lobster", arial; }
.alert-info { background-color: #4D3A7D; border: none; color: white; }
.disabled { cursor: default; }
.btn-default { color: #444; }
span, p, h1, strong, button { color: white; }
span, p, button { font-family: "Cabin", arial; }
button { border: none; }
.no-padding{padding:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-xs-4 no-padding"> <button class="btn btn-primary btn-block">Scrounge Cash</button> </div>
<div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">$0.00</button> </div>
<div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">$0.00/s</button> </div>
</div>
<div class="row">
<div class="col-xs-4 no-padding"> <button class="btn btn-primary btn-block">Pray to Demeter</button> </div>
<div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">0</button> </div>
<div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">0/s</button> </div>
</div>
</div>
</div>
</div>