title: Stretch UL list as horizontal navigation bar evenly spaced... with spaces on outer margins as well
body: <p>I spent a good chunk of the evening trying to get a horizontal navigation bar and managed to get it set up and centered, thanks to <a href="https://stackoverflow.com/questions/5060923/how-to-stretch-html-css-horizontal-navigation-items-evenly-and-fully-across-a">this tip</a>. However, this code gives items that are evenly spaced and pressed up against the edges of the page (or region, or div, or whatever they're inside).</p>
  
  <p>What I'd like is for them to be evenly spaced across what they are inside AND for spaces of the same size to appear on the outer margins, i.e. before the first and after the last items, as well.</p>
  
  <p>For reference, here's my HTML:</p>
  
  <pre><code>&lt;ul id = "nav"&gt;
      &lt;li&gt;Accueil&lt;/li&gt;
      &lt;li&gt;Recherche&lt;/li&gt;
      &lt;li&gt;Contact&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here is my CSS:</p>
  
  <pre><code>#nav {
      width: 100%;
      text-align: justify;
      margin: 0 0 3em 0;
      padding: 8px;
      list-style: none;
      border-bottom: 1px solid #ccc; 
      border-top: 1px solid #ccc;
  }
  
  #nav:after {
      content: '';
      display: inline-block;
      width: 100%;
  }
  
  #nav li {
      width: 15%;
      display: inline-block;
      padding: 4px 15px;
      text-align: center;
      text-decoration: none;
      background-color: #f2f2f2;
      border: 1px solid #ccc;
      border-radius: 
  }
  </code></pre>
  
  <p>Is there a way to do this without specifying fixed margins or artificially "squeezing" the contents of the region? Any help would be most appreciated indeed. Many thanks in advance!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Actually I do have a limit to 800px maximum in width. So there's no way to do this fluidly? I tried JavaScript to calculate what the spaces to the left and the right should be, but the points begin to spill over to the next line if I go above 5%.</p>
  
  <p>I think I might be missing something on precisely how the "before" and "after" aspects behave when a list is horizontalized. At this point would I be better off using a set of divs than bullet points? (If the list ever becomes dynamic that makes the page less proper, but for a simple project I doubt that will be a problem.)</p>
  
  <p>Thanks again!</p>
  
  <p><strong>UPDATE BIS</strong></p>
  
  <p>Found a great solution. Here it is:</p>
  
  <pre><code>#nav {
      display: flex;
      justify-content: space-around;
      text-align: justify;
      width: 100%;
      margin: 0;
      padding: 8px 0px;
      list-style: none;
      border-bottom: 1px solid #ccc; 
      border-top: 1px solid #ccc;
  }
  
  .navItem {
      position:relative;
      width: 15%;
      display: inline-block;
      padding: 4px 15px;
      text-align: center;
      text-decoration: none;
      border: 1px solid #ccc;
      border-radius: 3px;
  }
  .navSpan { 
      position:absolute; 
      width:100%;
      height:100%;
      top:0;
      left: 0;
      display: block;
  }
  </code></pre>