html - How to align divs right and left while using the CSS ghost element technique for vertical centering? -

i wanted vertically center 2 divs in header of site. here code:

        <header>             <div class="block">                 <div class="left">                     <ul>                         <li>home page link</li>                         <li>music page link</li>                         <li>contact page link</li>                     </ul>                 </div>                 <div class="right">                     <ul>                         <li> facebook icon code</li>                         <li> twitter icon code</li>                         <li> youtube icon code</li>                         <li> paypal donate button code</li>                     </ul>                 </div>             </div>         </header> 

and css:

.block {     width: 100%;     height: 90px; }  /* ghost element */ .block:before {     content: '';     display: inline-block;     height = 100%;     vertical-align: middle;     margin-right: -0.25em; }  .right, .left {     display: inline-block;     vertical-align: middle; }  .right {right: 0;} .left {left: 0;}  .right li, .left li {     display: inline-block; }  .left li {     font-size: 48px;     margin-left: 12px;     letter-spacing: -4.5px;     text-transform: uppercase; } 

this taken from:
https://stackoverflow.com/a/15304578/1491212
http://css-tricks.com/centering-in-the-unknown/

the code works insofar vertically centers divs. however, examples discuss 1 div vertically centered. want 2 div's vertically centered 1 aligned left , other aligned right. right now, sitting next each other aligned right:

i'm new coding , i've done reading before coming here; however, unable fix (probably) simple problem. so, div class=right , div class=left right , left within strange ghost element framework?

maybe can somehow?

http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

it's using text-align: justify;