vertical-alignment of inlined elements

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body, div, ul, li, h1 {
    margin: 0;
    padding: 0;
    border:none;
}
body {
    font: 81.25% 'Droid Sans', Georgia, sans-serif;
}
#header {
    width:100%;
    height:4em;
}
#header-content {
width:955px;
margin:0 auto;
}
#navigation li {
margin:0 1em;
}
#navigation li,
#navigation h1,
#navigation ul#language-option-nav {
display:inline;
}
/*Navigation*/
#navigation {
    list-style: none;
    width: 130%;
}
#header #logo img {
    width: 115px;
    height:39px;:
}

#language-option-nav li {
display:inline;
width:5em;
margin:5px;
}
#language-option-nav li a {
border:1px solid #FFF;
text-align:center;
margin-top:5px;
}

#header {
    background-color:#863138;
    filter: Alpha(Opacity=88);
    background-color: rgba(132, 48, 52, .88);
}
#navigation li a {
color:#fff;
}

</style>
</head>

<body>
<div id="header">
          <div id="header-content">
    <ul id="navigation">
              <li id="logo"><!--logo-->
        <h1><a href="#"><img src="_logo_115x39.png" alt="Immaculate"></a></h1>
      </li><!--End logo -->
              <!--Navigation-->
              <li id="one"><a href="#" title="Hem">one</a></li>
              <li id="two"><a href="#">two</a></li>
              <li id="three"><a href="#">three</a></li>
              <li id="four"><a href="#">four</a></li>

              <li id="language-option">
        <ul id="language-option-nav">
                  <li id="ch"><a href="#">ch</a></li>
                  <li id="en"><a href="#">en</a></li>
                </ul>
                </li>
                <li id="login" lang="en"><a href="#">Log In</a></li>
    </ul><!-- End Navigation-->
  </div><!--End header-content-->
</div><!--End header-->
</body>
</html>