How to spread elements horizontally evenly?

how about text-align:justify; ?

CSS3 flexboxes have better browser support now, although you may need to add additional vendor prefixes for more browser coverage.

Modern Approach:

Just change the display of the container element to flex and then utilize the justify-content property to specify how the browser should distribute the space around and between the flex items along the main axis.

In the example below, you will notice that justify-content: space-around or justify-content: space-between are used to space the elements out evenly.

.container {
  display: flex;
}
.container.space-around {
  justify-content: space-around;
}
.container.space-between {  
  justify-content: space-between;
}

<p>Using <code>justify-content: space-around</code>:</p>
<div class="container space-around">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<hr />

<p>Using <code>justify-content: space-between</code>:</p>
<div class="container space-between">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>