title: Align items in navigation bar
body: <p>Ciao! I have a navigation-bar at the top of a website with only two elements: a menu-icon and a brand-logo (Eiffeltower). The idea is to place the Eiffeltower image in the center of the nav-bar and the menu-icon at the very left side (in the withe area) of the nav-bar but I have some troubles with placing this correctly in CSS.</p>
  
  <p><code>text-align: center</code> seems not to work so I set up some <code>padding</code> commands, but I don't think this is a nice solution. And I can't figure out how to place the <code>fa fa-bar</code> to the left. I need some help! Can you take a look? </p>
  
  <p><a href="http://codepen.io/iJup/pen/jbrwRW?editors=100" rel="nofollow">Codepen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;JFP&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"&gt;
    &lt;link rel="stylesheet" href="/static/main.css"&gt;
    &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
    &lt;script src="/static/app.js"&gt;&lt;/script&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
    
    &lt;style&gt;
      .nav {
       list-style:none;
       margin:0 8%;
       padding:0;
       position:relative;
       text-align:center;
       background: rgb(51,51,51);
       color:rgb(51,51,51);
       font-size:140%;
       padding:0px 10px;
       font-family:Arial, Helvetica, sans-serif;
      border-bottom-left-radius: 120px;
      border-bottom-right-radius: 120px;
      }
      .nav li {
       position:relative;
       z-index:2;
       display:inline-block;
       vertical-align:bottom;
       text-transform:uppercase;
      }
        
      .nav a, .nav span {
       display:block;
       color:#fff;
       text-decoration:none;
       margin:0 20px;
      padding-right: 80px;
      }
        
      .nav a:visited{
        color:rgb(51,51,51)
      }
        
      .nav:after{
       content:"";
       position:absolute;
       top:0;
       bottom:50%;
       right:0;
       left:0;
       background: rgb(51,51,51);
      }
        
      .nav span{
       width:186px;
       height:77px;
       background:rgba(255,255,255, 0.3);
       font-size:77px; 
       overflow:hidden;
      }
        
      .nav #brand {
        height: 160px;
        width: 80px;
        position: absolute;
      }
      
      .nav #fafa {
        font-size: 30px;
        color: rgb(42, 186, 214);
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;ul class="nav center"&gt;
      &lt;li&gt;&lt;i id="fafa" class="fa fa-bars"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;li class="logo"&gt;&lt;span&gt;&lt;img id="brand" alt="Brand" src="https://photos-3.dropbox.com/t/2/AACJhIINsVBRwEqcMxgWNfqZu5OrjdJRMjG46W7GeV_ttw/12/5046553/jpeg/32x32/1/_/1/2/Eiffeltoren-logo.jpg/EOzL4wMYgEUgASgB/M6Hyu4cmSoxBTnl8a18nWaMYKaQpYmF2AznL32KgdT0?size=1024x768&amp;size_mode=2"&gt;&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>