title: Unsure how to fix li item widths
body: <p>I am pretty new to css and html and I am trying to create a drop-down menu that has 3 or 4 columns of links per drop down.  I want the columns to be inline with each other.  I have managed to accomplish that but the links in each column are going on two or more lines and I'd like them to display on one.</p>
  
  <p>I've been messing around with the css but can't seem to figure out how to make them display on one line per link.  </p>
  
  <p>In my codpen, you will see what I am working with: <a href="http://codepen.io/anon/pen/vLQGqM" rel="nofollow">http://codepen.io/anon/pen/vLQGqM</a></p>
  
  <p>The best I've been able to do is make </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tlgnav .tlgnav-column {
   
   width: 100%;
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>, but this makes the columns stack on top of each other, which is not what I want.</p>
  
  <p>I am thinking it might have something to do with my .tlgnav li being set at width of 16.66% but if I change that, my menu doesn't fill the width of the screen.</p>
  
  <p>Can anyone tell me what I am doing wrong?  </p>