How do I align spans or divs horizontally?

.floatybox {
     display: inline-block;
     width: 123px;
}

<style>
 #whatever div {
  display: inline
  margin: 0 1em 0 1em
  width: 30%
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

<div style="float: left;"></div>

<div style="display: inline;"></div>

<style>
html, body{
margin: 0;
padding: 0;
}

.content{
float: left;
width: 30%;
border:none;
}

.rightcontent{
float: right;
width: 30%;
border:none
}

.hspacer{
width:5%;
float:left;
}

.clear{
clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>