CSS Nav Bar Not Floating Right - html

Question

I need the last tab (About) to float to the right and the others to the left. It all floats left.
<div class="nav">
<ul>
<li>HOME</li>
<li>COSC 231</li>
<li>MAGIC 8 BALL</li>
<li>ABOUT</li>
</ul>
</div>
a {
color:#b7b7b7;
text-decoration:none;
}
body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}
#lines {
line-height:.3px;
}
hr {
width:30%;
}
#page {
text-align:left;
}
div {
margin:0 auto;
text-align:center;
}
img {
width:50%;
border:1px solid white;
}
.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.nav div {
width:100%;
position: fixed;
}
.nav ul {
list-style-type: none;
width:100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dbdbdb;
}
.nav li {
float: left;
}
.nav li a {
color: white;
text-align: center;
display: block;
padding: 12px 16px;
text-decoration: none;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
.nav li a:hover {
background-color: #efefef;
}
.aboutRight {
position: fixed;
float: right;
left: 100px;
}

Answer 1

First of all have style for class aboutRight .aboutRight and your link has ID <li>ABOUT</li>. Rewrite id into class as it's a bad practice to use IDs for styling.
Second, you don't need position:fixed; in this style, it won't take space in a parent container, you need this link to be in a same position as other links.
Third, you should apply that class not to the <a> tag, but to the <li> element, because you want to float right <li> inside of <ul>, not <a> inside of <li>
And lastly, since you have this rule .nav li { float: left; } and want to override it for a certain li, you should write more specific selector, not just a class, e.g. nav li.aboutRight
I created a snippet for you with working code.
a {
color:#b7b7b7;
text-decoration:none;
}
body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}
#lines {
line-height:.3px;
}
hr {
width:30%;
}
#page {
text-align:left;
}
div {
margin:0 auto;
text-align:center;
}
img {
width:50%;
border:1px solid white;
}
.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.nav div {
width:100%;
position: fixed;
}
.nav ul {
list-style-type: none;
width:100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dbdbdb;
}
.nav li {
float: left;
}
.nav li a {
color: white;
text-align: center;
display: block;
padding: 12px 16px;
text-decoration: none;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
.nav li a:hover {
background-color: #efefef;
}
.nav li.aboutRight {
float: right;
left: 100px;
}
<div class="nav">
<ul>
<li>HOME</li>
<li>COSC 231</li>
<li>MAGIC 8 BALL</li>
<li class="aboutRight">ABOUT</li>
</ul>
</div>