html - Purposeful uneven spacing between nav elements -

i have nav in header 4 basic elements in list want spaced evenly. have no issue getting work.

<nav>      <ul>         <li><a href="index.html">portfolio</a></li>         <li><a href="about.html">about</a></li>         <li><a href="resume.html" >resume</a></li>         <li><a href="contact.html" class="selected" >contact</a></li>      </ul>   </nav>  </header> 

css:

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;   } 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; } 

however, want link item in list, let's call feed, want inline rest of nav, float right of page. wish add nav around new list item:

<div class="feed"><li><a href="feed.html">feed</a></li></div> 

and style like:

.feed{    float: right; } 

but forces other 4 items in list move left since text-align: center centered based on center point p of portfolio d in feed. since want feed wrap in nav, can't ignore feed item (i want in div since want different styling rest of nav items).

anyway, there way keep nav intact , make adjustments allow original 4 items (portfolio, about, resume , contact) hold center in header , have feed spaced further right still keep wrapped in same nav?

many thanks!

is this meant?

i used absolute positioning on #feed li , added position relative ul newly position #feed element not interfere centering.

updated html

<nav>     <ul>         <li><a href="index.html">portfolio</a>         </li>         <li><a href="about.html">about</a>         </li>         <li><a href="resume.html">resume</a>         </li>         <li><a href="contact.html" class="selected">contact</a>         </li>         <li id="feed">             <a href="feed.html">feed</a>         </li>     </ul> </nav> 

updated css

nav ul {     list-style: none;     margin: 0 30px;     padding: 2px 20px 0 0;     position: relative; } #feed {     position: absolute;     right: 0px; }