Menu item wont align right - php

Question

Hey I am making a menu for a website for a project I am doing and I couldn't get the Menu item "Login" to align right. I would appreciate it if someone would help me. Also I would be happy to give you any other parts of the code you need. Thanks Joshua
CSS Code
html, body {
padding: 0;
margin: 0;
}
body {
background-color: #fff;
font-family: Arial;
font-size: 14px;
color: #000;
padding: 0;
margin: 0;
}
h1, h2, h3 {
margin-bottom: 40px;
}
p {
margin-bottom: 10px;
line-height: 22px;
}
.title-box {
font-size: 25px;
padding: 15px;
background-color: #fff;
color: #fff;
font-weight: 700;
}
.title-box a {
color: #fff;
text-decoration: none;
}
.header {
background-color: #42444f;
/*margin:20px 10px 0 10px;*/
margin: 0;
color: #acadb1;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
.header_left_box {
float: left;
}
.header_right_box {
float: right;
}
.header a {
text-decoration: none;
}
.header li.active a,
.header li.active:hover a {
color: #fff;
background-color: #2c2f3b;
}
.header li:hover a {
color: #fff;
}
.content {
padding: 45px 35px;
margin: 0;
min-height: 250px;
}
.content a {
text-decoration: underline;
color: #2C2F3B;
}
.footer {
background-color: #42444f;
color: #acadb1;
font-size: 15px;
font-weight: bold;
padding: 30px 35px;
margin: 0;
}
h1 {
font-size: 40px;
margin-top: 0;
}
h2 {
font-size: 25px;
margin-top: 0;
}
.feedback {
border: 1px solid black;
color: black;
padding: 20px;
font-size: 16px;
margin-bottom: 35px;
}
.feedback.error {
border: 1px solid red;
color: red;
}
.feedback.success {
border: 1px solid green;
color: green;
}
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu {
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
ul#menu li {
margin-left: -4px;
}
ul#menu li:first-of-type {
margin-left: 0;
}
ul#menu ul.sub-menu {
padding-bottom: 5px;
}
ul#menu ul.sub-menu li {
margin-left: 0;
}
ul#menu li a {
color: #acadb1;
text-decoration: none;
padding: 15px;
font-weight: bolder;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
display:inline-block;
white-space: nowrap;
}
ul#menu li a:hover {
color: #fff;
}
ul#menu li.active a {
color: #fff;
}
ul#menu li.active ul a {
color: #acadb1;
}
ul#menu li ul.sub-menu li a:hover {
color: #fff;
}
ul#menu li {
position: relative;
}
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 44px;
left: 0;
background-color: #42444f;
}
ul#menu li.active ul.sub-menu {
background-color: #2c2f3b;
}
ul#menu li ul.sub-menu li a {
padding: 10px 15px;
font-size: 12px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
.header .namebox {
float: right;
background-color: #1e2029;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
height: 100%;
line-height: 44px;
padding: 0 30px;
text-decoration: none;
}
.header .avatar {
float: left;
width: 44px;
height: 44px;
}
input, select, textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
label {
display: block;
margin-bottom: 5px;
line-height: 20px;
}
input {
display: block;
margin-bottom: 15px;
padding: 10px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
border: 1px solid #ddd;
color: #555;
font-weight: bold;
}
input[type="submit"] {
border: 0;
background-color: #2C2F3B;
color: #fff;
font-weight: bold;
cursor: pointer;
}
.remember-me-checkbox {
float: left; min-width: 0; margin: 3px 10px 15px 0;
}
.remember-me-label {
float:left; min-width: 0; font-size: 12px; color: #888;
}
.login-submit-button {
float: none; clear: both;
}
.login-form-password-pattern-reminder {
display: block;
color: #999;
font-size: 11px;
}
.login-default-box,
.login-facebook-box {
display: inline-block;
width: 300px;
vertical-align: top;
}
a.facebook-login-button,
a.facebook-register-button {
background-color: #3b5998;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bolder;
padding: 15px 20px;
border-radius: 4px;
}
a.facebook-login-button:hover,
a.facebook-register-button:hover {
background-color: #2f477a;
}
.register-default-box,
.register-facebook-box {
display: inline-block;
width: 300px;
vertical-align: top;
}
.clear-both {
clear: both;
}
.debug-helper-box {
position: fixed;
bottom: 20px;
right: 0;
padding: 20px;
color: #fff;
background-color: red;
font-weight: bold;
}
#media only screen and (max-width:800px) {
.header_left_box,
.header .avatar {
float: none;
}
.header_right_box {
width: 100%;
background-color: #1E2029;
}
ul#menu li {
width: 100%;
text-align: center;
margin-left: 0;
}
ul#menu li a {
display: block;
}
ul#menu li ul.sub-menu {
display: block;
position: relative;
top: 0;
}
ul#menu li ul.sub-menu li {
font-size: 12px;
background-color: #4a4c55;
}
ul#menu li.active ul.sub-menu li {
background-color: #2C2F3B;
}
ul#menu ul.sub-menu {
padding-bottom: 0;
}
}
.avatar img {
width: 44px;
height: 44px;
}
table{
border-collapse: collapse;
border-spacing: 0;
border: 1px solid black;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
height:100%;
margin:0px;padding:0px;
} tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
} tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
} tr:hover td{
background-color:#ffffff;
}
td{
vertical-align:middle;
background-color:#ffffff;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
} tr:last-child td{
border-width:0px 1px 0px 0px;
} tr td:last-child{
border-width:0px 0px 1px 0px;
} tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
tr:first-child td{
background:-o-linear-gradient(bottom, #ff7f00 5%, #ff0000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #ff0000) );
background:-moz-linear-gradient( center top, #ff7f00 5%, #ff0000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f00', endColorstr='#ff0000'); background: -o-linear-gradient(top,#ff7f00,ff0000);
background-color:#ff7f00;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
tr:first-child:hover td{
background:-o-linear-gradient(bottom, #ff7f00 5%, #ff0000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #ff0000) );
background:-moz-linear-gradient( center top, #ff7f00 5%, #ff0000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f00', endColorstr='#ff0000'); background: -o-linear-gradient(top,#ff7f00,ff0000);
background-color:#ff7f00;
}
tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
Menu Code
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Login</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo URL; ?>application/libs/css/reset.css" />
<link rel="stylesheet" href="<?php echo URL; ?>application/libs/css/style.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="<?php echo URL; ?>application/libs/js/application.js"></script>
</head>
<body>
<div class='title-box'>
<img src=''>
</div>
<div class="header">
<div class="header_left_box">
<ul id="menu">
<li <?php if ($this->checkForActiveController($filename, "index")) { echo ' class="active" '; } ?> >
Forum
</li>
<li <?php if ($this->checkForActiveController($filename, "helpcenter")) { echo ' class="active" '; } ?> >
Help Center
</li>
<?php if (Session::get('user_logged_in') == true):?>
<li <?php if ($this->checkForActiveController($filename, "dashboard")) { echo ' class="active" '; } ?> >
Dashboard
</li>
<?php endif; ?>
<?php if (Session::get('user_logged_in') == true):?>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
My Account
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Change account type
</li>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Upload an avatar
</li>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Edit my username
</li>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Edit my email
</li>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Edit my password
</li>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Logout
</li>
</ul>
</li>
<?php endif; ?>
<?php if (Session::get('user_type') == 1):?>
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
Student
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<?php endif; ?>
<?php if (Session::get('user_type') == 2):?>
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
Student
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<li <?php if ($this->checkForActiveController($filename, "teacher")) { echo ' class="active" '; } ?> >
Teacher
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "teacher")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<?php endif; ?>
<?php if (Session::get('user_type') == 3):?>
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
Student
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<li <?php if ($this->checkForActiveController($filename, "teacher")) { echo ' class="active" '; } ?> >
Teacher
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "teacher")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<li <?php if ($this->checkForActiveController($filename, "admin")) { echo ' class="active" '; } ?> >
Admin
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "admin")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<?php endif; ?>
<?php if (Session::get('user_logged_in') == false):?>
<li class='right' <?php if ($this->checkForActiveControllerAndAction($filename, "login/index")) { echo ' class="active" '; } ?> >
Login
</li>
<?php endif; ?>
</ul>
</div>
<?php if (Session::get('user_logged_in') == true): ?>
<div class="header_right_box">
<div class="namebox">
Hello <?php echo Session::get('user_name'); ?>!
</div>
<div class="avatar">
<?php if (USE_GRAVATAR) { ?>
<img src='<?php echo Session::get('user_gravatar_image_url'); ?>'
style='width:<?php echo AVATAR_SIZE; ?>px; height:<?php echo AVATAR_SIZE; ?>px;' />
<?php } else { ?>
<img src='<?php echo Session::get('user_avatar_file'); ?>'
style='width:<?php echo AVATAR_SIZE; ?>px; height:<?php echo AVATAR_SIZE; ?>px;' />
<?php } ?>
</div>
</div>
<?php endif; ?>
<div class="clear-both"></div>
</div>

Answer 1

.header_left_box { }
ul#menu li:last-child {
float: right;
}
As I stated earlier, you need to restructure your menu code for this to work. This works http://jsfiddle.net/andyjh07/MVzR7/

Answer 2

Try adding float:right to ul#menu
ul#menu {
float:right;
}
If it'll not work then I have to see some working demo of your code.
UPDATE
http://jsfiddle.net/dwebexperts/fL3tG/
I think I got the issue. Your code is:-
<div class="header_left_box">
Your menu is here I think
</div>
<div class="header_right_box">
//Your other code
</div>
AND
Your CSS is:-
.header_left_box {
float: left;
}
.header_right_box {
float: right;
}
It shows that div containing your Menu will be on left side. You have to inter-change the classes of both the divs or you can take your menu our of this div <div class="header_left_box">
Remove width: 100%; from this:-
ul#menu li {
width: 100%;
text-align: center;
margin-left: 0;
}

Answer 3

Use this in your css menu field:
float:right;