Nav bar align: Logo on left, links on right - css

Question

I'm having trouble getting the alignments right on a nav bar. I'm trying to figure out how to get the logo part to stay on the left of the nav bar, but put the links on the right side. I've tried using float: right but I can't seem to get it to work on just the links. How can I do this?
https://jsfiddle.net/t46bcayd/1/
<nav>
<ul>
<li>Logo</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>

Answer 1

Flexbox is perfect here...no need to change the structure, unless you want to.
body {
margin: 0;
padding: 0;
font-size: 15px;
}
nav {
background-color: black;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: white;
background-color: red;
display: block;
line-height: 3em;
padding: 1em 3em;
text-decoration: none;
}
nav ul li:first-child {
margin-right: auto;
}
nav ul li a.logo {
background-color: green;
}
nav ul li a:hover {
background-color: blue;
}
<nav>
<ul>
<li>Logo
</li>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</nav>

Answer 2

If you remove the inline-block rule for the list items you can float the first one left and the others right:
li {
float: right;
}
li:first-child {
float: left;
}
jsFiddle example
You'd also need to re-order the list items that are floated right to:
<li>Logo</li>
<li>Three</li>
<li>Two</li>
<li>One</li>

Answer 3

You could use flexbox for this.
<style>
nav{
display:flex;
justify-content: space-between;
align-items: center;
}
</style>
<nav>
Logo
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
Remember prefixes ... works in IE > 9

Answer 4

Use the float:left property
body {
margin: 0;
padding: 0;
font-size: 15px;
}
nav {
background-color: black;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li:not(:first-child) {
float: right;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: white;
background-color: red;
display: block;
line-height: 3em;
padding: 1em 3em;
text-decoration: none;
}
nav ul li a.logo {
background-color: green;
}
nav ul li a:hover {
background-color: blue;
}
<nav>
<ul>
<li>Logo</li>
<li>Three</li>
<li>Two</li>
<li>One</li>
</ul>
</nav>
I did have to change the order so they showed up right