title: Having an offset link on a nav that still functions with the nav
body: <p>I have a standard nav that I want center aligned like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: silver;
  }
  nav {
    text-align: center;
    padding: 3px 0;
    margin: 5px 0 0 5px;
  }
  nav ul {
    list-style: none;
    margin: 0 30px;
    padding: 2px 20px 0 0;
    position: relative;
  }
  nav li {
    display: inline-block;
    font-size: 1.5em;
  }
  nav a {
    font-weight: 800;
    color: #fff;
    padding: 2px 10px 2px;
    text-transform: uppercase;
    text-decoration: none;
  }
  nav a:active {
    color: #00A2E0;
  }
  nav a {
    color: #fff;
  }
  nav a.selected,
  nav a:hover {
    color: #23c3ff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="resume.html"&gt;Resume&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.html" class="selected"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code works just fine in all window sizes.  But I want another list item, feed, on the nav that attaches itself to the same behavior as the rest of the list items, but is spaced to the right of Portfolio, about, resume and contact.  So:</p>
  
  <p>Portfolio   About   Resume    Contact              Feed</p>
  
  <p>Since my nav is set to center, if I add Feed to nav and float the single list item, the wntire list will align center with feed attached and will look out of center.  In other words, I still want the first 4 items in the list to align center, feed to be floated to the right, but also want feed to move with the list as the screen sizes down.</p>
  
  <p>Giving feed sbsolute positioning works in a maximum window, but when the screen size becomes smaller then feed will eventually overlap the rest of the nav elements.</p>
  
  <p>I also tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: silver;
  }
  nav {
    text-align: center;
    padding: 3px 0;
    margin: 5px 0 0 5px;
  }
  .clearfix {
    *zoom: 1;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    line-height: 0;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  .feed {
    float: right;
    right: 20px;
    z-index: 30;
  }
  /*
  #feed{
    position: absolute;
    right: 40px;
  }*/
  
  nav ul {
    list-style: none;
    margin: 0 30px;
    padding: 2px 20px 0 0;
    position: relative;
  }
  nav li {
    display: inline-block;
    font-size: 1.5em;
  }
  nav a {
    font-weight: 800;
    color: #fff;
    padding: 2px 10px 2px;
    text-transform: uppercase;
    text-decoration: none;
  }
  nav a:active {
    color: #00A2E0;
  }
  nav a {
    color: #fff;
  }
  nav a.selected,
  nav a:hover {
    color: #23c3ff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="clearfix"&gt;
    &lt;div class="feed"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="feed.html"&gt;feed&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="index.html" class="selected"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="resume.html"&gt;Resume&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;!-- &lt;li id = "feed"&gt;&lt;a href="feed.html"&gt;bucket feed&lt;/a&gt;&lt;/li&gt; --&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and that works the best, but the div associated with feed only allows me to click it (the associated anchor link it seems) in a 1 pixel opening right below the text itself.  The rest seems to be overlap from the ul and the nav which is 'covering' the rest of the clickable area.  Sorry for the lengthy post, but thanks for any help you might have!</p>