How to make list items spread evenly within an unordered list (navigation bar)

Question

I have a navigation bar consisting of an unordered list containing 4 list items (items on the navigation bar).

All the list items are currently floating to the left and not filling up the entire width of the nav bar. I've read various answers on here to similar questions to no avail. I'd like each item to take up equal space (so longer titles will have less padding in their item). Here is a jsFiddle demo and I've provided a screenshot below of roughly what I'd like:

HTML:

<ul id="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="selling.html">Products</a></li>
      <li><a href="businesses.html">About Us</a></li>
      <li><a href="contact/contact.html">Contact Us</a></li>
   </ul>

CSS:

#nav {
      width: 100%;
      float: left;
      margin: 0 0 3em 0;
      padding: 0;
      font-size:1.4em;
      list-style: none;
    background-color: #1A810A;
border-bottom: 1px solid #544830;
border-top: 1px solid #236416;
}
   #nav li {
      float: left; }
   #nav li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      font-family:Garamond;
      color: #fff;
      border-right: 1px solid #ccc; }
   #nav li a:hover {
      color: #fff;
      background-color: #0A4901; }
   /* End navigation bar styling. */

   /* This is just styling for this specific page. */

   #wrap {
      width: 750px;
      margin: 0 auto;
      background-color: #fff; }
   h1 {
      font-size: 1.5em;
      padding: 1em 8px;
      color: #333;

      margin: 0; }
   #content {
      padding: 0 50px 50px; }

Thanks for your help!

Desired solution:

Answer 1

Make each item take up a quarter of the list, and center the text:

#nav li {
  float: left; 
  width:25%;
  text-align:center;
}