small gap between two divs - html

Question

I am using Bootstrap 3 and I am having issues to make small gap between two divs. I have tried offset but still its not working here is my code
.box1 {
background-color:black;
width:150px;
height:150px;
}
<div class="container">
<div class="row">
<div class="col-md-1 col-md-offset-0">
<div class="box1">
</div>
</div>
<div class="col-md-1 col-md-offset-1">
<div class="box1">
</div>
</div>
</div>
</div>
The problem is if set second div col-md-offset-0 it gets too close first div and if I set to 1 or above it sets very big gap. I want very small gap

Answer 1

Edited:
Try adding margin with a custom class-name on the col divs.
like so
<div class="container">
<div class="row">
<!-- custom-spacer is a custom class-name. to add extra margin. -->
<div class="col-md-1 col-md-offset-0 custom-spacer">
<div class="box1">
</div>
</div>
<div class="col-md-1 col-md-offset-1">
</div>
</div>
</div>
<style>
.box1 {
background-color:black;
width:150px;
height:150px;
}
.custom-spacer {
margin-right: 40px; /* Increase or decrease the margin as required. */
}
</style>
There could be one problem with this approach, because you are increasing the gutter size, you will not be able to create 12 cols within the same row.