title: How to keep <li> elements on single line in fixed width <ul>?
body: <p>I've a header <code>div</code> and a menu <code>ul</code> below it. I'd like to accomplish 2 things:</p>
  
  <p>1) the <code>ul</code> should have the same width as the <code>div</code> (outer vertical borders exactly same x position
  2) I'd like to keep the spacing between <code>li</code> elements roughly equal</p>
  
  <p>With some trial and error on the <code>li</code>'s margins and padding I roughly achieved the first point in Google Chrome (please see this <a href="http://jsfiddle.net/y4ANj" rel="noreferrer">jsfiddle</a>) but in Firefox the <code>li</code>'s don't fit in the <code>ul</code> so they don't stay on a single line. Also, the last <code>li</code> tends to 'spill over' to a second line when zooming in/out.</p>
  
  <p>I tried it with <code>margin:5px auto</code> and <code>padding:5px auto</code> on the <code>li</code> elements but here <code>auto</code> seems to mean zero.</p>
  
  <p>Is this really difficult/impossible or am I overlooking something obvious?</p>
  
  <p>I also tried <code>width:fit-contents</code> but that didn't help either.</p>