Add margin between row elements bootstrap - html

Question

I have 3 different elements in my row class with bootstrap. I wish to create a margin (of 20px for example) between EACH of the elements in the row container. Since the elements are divided into 4 equal spaces of the row container (on the same line), adding a margin class with a margin parameter of 20px pushes the other elements to the next line (whereas I want to keep them all in the same line).
My current code
<div class="row">
<a style="display:block" href="#">
<div class="col-sm-4 margin">
<span class="glyphicon glyphicon-envelope"></span>
<h4>About Us</h4>
</div>
</a>
<a style="display:block" href="#">
<div class="col-sm-4 margin">
<span class="glyphicon glyphicon-envelope"></span>
<h4>Contacts</h4>
</div>
</a>
<a style="display:block" href="#">
<div class="col-sm-4 margin">
<span class="glyphicon glyphicon-envelope"></span>
<h4>Upcoming Events</h4>
</div>
</a>
</div>

Answer 1

I've changed the structure to a more proper one I think. And I use padding on h4 element.
See this fiddle
<div class="row">
<div class="col-sm-4">
<h4 class="margin">
<a style="display:block" href="#">
<span class="glyphicon glyphicon-envelope"></span>
About Us
</a>
</h4>
</div>
<div class="col-sm-4">
<h4 class="margin">
<a style="display:block" href="#">
<span class="glyphicon glyphicon-envelope"></span>
About Us
</a>
</h4>
</div>
<div class="col-sm-4">
<h4 class="margin">
<a style="display:block" href="#">
<span class="glyphicon glyphicon-envelope"></span>
About Us
</a>
</h4>
</div>
</div>

Answer 2

Created a fiddle to make things clear .
https://fiddle.jshell.net/q1je1kct/
Is this you wanted
Added
display:inline-block;
Update
https://fiddle.jshell.net/q1je1kct/4/
If you don't want the elements jumping to newline , take a look into this
https://fiddle.jshell.net/q1je1kct/5/
Created using flex concept.
new Update as suggested
https://fiddle.jshell.net/q1je1kct/8/