Move li to the right in menu - html

Question

I have a menu, and I would like to have the last 3 options (some images for Facebook/Twiter/Gmail) to be aligned to the right. So far I tried:
li:last-child { float:right;}- combine the 3 images in one to have the last option to the right, but not even so works
float: right; - the same result as above
text-align: right; - no change
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 225px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 10;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li><li id="alignright">
FB
</li><li>
Twitter
</li><li style="text-align: right;">
Gmail
</li>
</ul>
</div>
</div>

Answer 1

Flexbox can do that:
JSfiddle Demo
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
height: 100px;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
}
#nav ul li {} #nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a {
color: white;
display: block;
padding: .5em;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 10;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#alignright {
margin-left: auto;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home
</li>
<li>
Study
</li>
<li>
Games
<ul>
<li>Riddles
</li>
<li>
Flip card game
</li>
<li>
Spot the mistake
</li>
<li>
Multiple choice
</li>
</ul>
</li>
<li>
Read
</li>
<li>
Contact
</li>
<li>
About Us
</li>
<li id="alignright">
FB
</li>
<li>
Twitter
</li>
<li style="text-align: right;">
Gmail
</li>
</ul>
</div>
</div>

Answer 2

First of all:
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }