Navigation Bar is backwards on large media not Mobile phones - html

Question

I trying to to make a responsive navigation menu (logo LEFT and nav RIGHT, at one point the it was working fine on the large media types but failed on the mobile media (order of nav back to front) I have tried aligning the UL float right and Li float left but no joy, I'm sure I,m just over looking something simple.
HTML
<div id="Header"><!--Start of Header-->
<div><img id="Logo"src="images/logo.png"></div>
<nav><!--start of nav tag-->
<span class="nav-btn"></span>
<ul class="nav">
<li>Home</li>
<li>About Us
<ul>
<li><a href="#Beliefs" >Beliefs</a></li>
<li>Pastors</li>
</ul>
</li>
<li>Services</li>
<li>Ministries
<ul>
<li>Evangelism</li>
<li>LifeGroups</li>
<li>Prayer</li>
<li>Youth</li>
<li>Childrens</li>
<li>Extra</li>
</ul>
</li>
<li>Media
<ul>
<li>Sermons</li>
<li>Gallery</li>
<li>Newsletter</li>
<li>Videos</li>
</ul>
</li>
<li>Contact Us</li>
</ul><!--End of nav class ul tag-->
</nav><!--End of nav tag-->
</div><!--End of Header-->
CSS
/*Start of Navigation Bar*/
/*Navigation ul*/
.nav {
width:100%;
background:black;
line-height:100px;
position:fixed;
border-bottom: 1px red solid;
}
/*Navigation li*/
nav .nav li{
list-style-type: none;
float: left;
position:relative;
}
/*Dropdown Clear funtion*/
#NavBar ul:after{content:"";display:block;clear:both}
/*Navigation a*/
nav .nav li a{
color:white;
text-decoration: none;
padding:20px;
}
/*Navigation a HOVER*/
nav .nav li a:hover{
color:yellow;
text-decoration: none;
padding:px;
background:blue;
transition:all 0.8s;
}
/*Navigation li HOVER*/
nav .nav li:hover{
width:auto;
background:black;
transition:all 0s;
}
/*Mobile Menu HIDDEN submenu*/
/*hide submenu*/
nav .nav li ul {
width:auto;
display: none;
border-right:2px red solid;
border-left:2px red solid;
}
/*Mobile menu button Display:NONE*/
.nav-btn{display:none;}
/*Show submenu at hover*/
nav .nav li:hover ul {
width:auto;
display:block;
position:absolute;
top:100px;
background-color:black;
border-bottom:2px red solid;
}
/*Make submenu vertical*/
nav .nav li ul li{
width:100%;
display: block;
float:none;
line-height:60px;
position: relative;
z-index: 10;
}
/*Navigation sub li*/
nav .nav li ul li:hover{
width:auto;
color:red;
text-decoration: none;
background:blue;
}
/*Navigation a*/
nav .nav li ul li a:hover{
width:auto;
color:yellow;
text-decoration: none;
background-color:blue;
}
/*MOBILE PHONE*/
#media (max-width: 660px){
/*Navigation a HOVER 1st level - MOBILE PHONE*/
nav .nav li a:hover{
color:yellow;
background:black;
transition:all 0.0s;
}
/*Navigation a HOVER sub menu - MOBILE PHONE*/
nav .nav li ul li a:hover{
width:auto;
color:yellow;
text-decoration: none;
background-color:transparent;
}
/*Navigation ul size of ul main menu MOBILE PHONE*/
.nav {
width:60%;
height:auto;
background:black;
line-height:50px;
position:fixed;
border-radius:0 0 20px 0;
}
/*Navigation li size of li in - MOBILE PHONE*/
nav .nav li{
width:100%;
display:block;
float: none;
background-color:navy;
border-bottom:1px red solid;
}
/*Navigation li size of li in - MOBILE PHONE*/
nav .nav li:last-child{
border-radius:0 0 20px 0;
border-bottom:1px yellow solid;
}
/*sub menu background color - MOBILE PHONE*/
nav .nav li ul li{
width:100%;
height:100%;
left:30px;
line-height:30px;
background-color:orange;
}
/*2nd level UL - MOBILE PHONE*/
nav .nav li ul{
border-right:0px red solid;
border-left:0px red solid;
}
/*2nd level UL HOVER - MOBILE PHONE*/
nav .nav li:hover ul {
width:50%;
padding:0px;
margin:0px;
left:75px;
top:10px;
background-color:transparent;
}
/*1st level UL- MOBILE PHONE*/
.nav{
text-align:left;
display:none;
}
/*1st level LI- MOBILE PHONE*/
.nav > li{
display:block;
}
/*Menu BUTTON settings- MOBILE PHONE*/
.nav-btn{
width:100%;
height:70px;
display:block;
background-color:navy;
color:#FFF;
font-size:30px;
padding-left:10px;
padding-top:10px;
text-align:left;
cursor:pointer;
}
/*Menu BUTTON- MOBILE PHONE*/
.nav-btn:before{
content: "Menu";
}
}

Answer 1

You could do:
nav .nav {
float: left;
}
nav .nav li {
display:inline-block;
}
That would float the .nav div left instead, and the LI's will be next to eachother