Ul Li tag Can't be Right Aligned
<p>I am trying to left align logo and right align the ul li tag. I am using float but strangely the code is not working and I have no idea why it is not getting right aligned. Please take a look - </p>

<p>the problem is i think i have used the same code elsewhere and it seems to be working perfectly but this time around for some unknown reason it is mot working. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
/* CSS Document */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}



/*
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Archivo Narrow', sans-serif;
font-family: 'Comfortaa', cursive;
*/


body {
font-family: 'Archivo Narrow', sans-serif;
}

.head {
 width: 100%;
 margin: 0 auto; 
 padding: 0px;
 background-color: #855fa8; 
}

.menu {
  width: 1020px;
  margin: 0 auto; 
  padding: 0px;
  overflow: hidden; 
  padding-top: 20px;
}

 .left-menu {
   width: 15%;
   float: left;
 }
 
  .left-menu img {
     display: block;
     width: 100%;
  }
  
 
 
 .right-menu {
   width: 70%; 
   float: right; 
 }







/*Strip the ul of padding and list styling*/
ul {
 list-style-type:none;
 margin:0;
 padding:0;
 position: absolute;
}

/*Create a horizontal list with spacing*/
li {
 display:inline-block;
 float: left;
 margin-right: 1px;
}

/*Style for menu links*/
li a {
 display:block;
 min-width:80px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 font-family: 'Archivo Narrow', sans-serif;
 color: #fff;
 text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
 background: #19c589;
}

/*Style for dropdown links*/
li:hover ul a {
 background: #f3f3f3;
 color: #2f3036;
 height: 40px;
 line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
 background: #19c589;
 color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
 display: none;
}

/*Make dropdown links vertical*/
li ul li {
 display: block;
 float: none;
}

/*Prevent text wrapping*/
li ul li a {
 width: auto;
 min-width: 100px;
 padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
 display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-decoration: none;
 color: #fff;
 background: #19c589;
 text-align: center;
 padding: 10px 0;
 display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 760px){
 /*Make dropdown links appear inline*/
 ul {
  position: static;
  display: none;
 }
 /*Create vertical spacing*/
 li {
  margin-bottom: 1px;
 }
 /*Make all menu links full width*/
 ul li, li a {
  width: 100%;
 }
 /*Display 'show menu' link*/
 .show-menu {
  display:block;
 }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="head"&gt;

   &lt;div class="menu"&gt;
            
                   &lt;div class="left-menu"&gt;                   
                        &lt;img src="http://i.imgur.com/MvTUZ36.png" alt="logo"&gt;
                    &lt;/div&gt;&lt;!-- left menu --&gt; 
                    
                    &lt;div class="right-menu"&gt;
                        
                                   &lt;label for="show-menu" class="show-menu"&gt;Show Menu&lt;/label&gt;
                                    &lt;input type="checkbox" id="show-menu" role="button"&gt;
                                &lt;ul id="menu"&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href="#"&gt;About ￬&lt;/a&gt;
                                    &lt;ul class="hidden"&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;What We Do&lt;/a&gt;&lt;/li&gt;
                                    &lt;/ul&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href="#"&gt;Portfolio ￬&lt;/a&gt;
                                    &lt;ul class="hidden"&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Photography&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Illustration&lt;/a&gt;&lt;/li&gt;
                                    &lt;/ul&gt;
                                &lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                            
                    &lt;/div&gt;&lt;!-- right menu --&gt; 
        &lt;/div&gt;&lt;!-- Menu --&gt; 

    &lt;/div&gt;&lt;!-- head --&gt; </code></pre>
</div>
</div>
</p>