css form help with problem

Appologizes if this one has already been covered, but I'm close to deadline...

I have a div with a defined width of 714px where I output a not defined number of list items in an unordered list. I need to float these list items next to each other and break on every three items.

Result should be list items with a width of 222px with a right-margin of 24px, but doing this makes the last item break as there's no room for a right-margin of this object.

So basically code is:

<div>
<ul>
<li></li>
<li></li>
<li></li>
...
<li></li>
</ul>
</div>

The form worked but when I tried to align the input boxes with the CSS form.contact label.fixedwidth the lines looked like they all wrapped. Below is the CSS excerpt for the form and the HTML plus images of my output and what I want it to look like. I cannot see why the input boxes are not aligning.

CSS Style Sheet (excerpt)

form.contact fieldset {
  border: 2px solid navy;
  padding: 10px;
}
 
form.contact legend {
  font-weight: bold;
  font-size: small;
  color: navy;
  padding: 5px;
}
form.contact {
  padding: 0;
  margin: 0;
  margin-top: -15px;