Equal Width Nav. Method take from a combination of http://stackoverflow.com/questions/49536/how-do-i-really-justify-a-horizontal-menu-in-htmlcss and http://css-tricks.com/equidistant-objects-with-css/.

gistfile1.less

.equiwidth {
	text-align: justify;
	line-height: .5em;
	padding-top: .25em;
	line-height: 0;

	* {
		display: inline;
	}

	li {
		display: inline-block !important;
		width: auto!important;

		a {
			margin: 0;
			line-height: 1em;
		}
	}

	&:after {
		content: '';
		width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
		display: inline-block;
	}
}

gistfile2.html

<div class="equiwidth">
	<ul>
	    <!-- There needs to be white space after the li's for this to work. -->
	    <li><a href="#">Link 1</a></li>
	    <li><a href="#">Link 2</a></li>
	    <li><a href="#">Link 3</a></li>
	    <li><a href="#">Link 4</a></li>
	</ul>
</div>

gistfile3.css

.equiwidth {
  text-align: justify;
  line-height: .5em;
  padding-top: .25em;
  line-height: 0;
}
.equiwidth * {
  display: inline;
}
.equiwidth li {
  display: inline-block !important;
  width: auto!important;
}
.equiwidth li a {
  margin: 0;
  line-height: 1em;
}
.equiwidth:after {
  content: '';
  width: 100%;
  /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}