我试图重新创建谷歌主页布局的做法，我似乎不能集中谷歌标志。
我试过了

• text-align: center;
• position: absolute;
• 增加徽标的左边距（但我觉得这不是正确的方法，因为当我改变浏览器大小时，它没有居中。）

我意识到可能是顶栏影响了logo的对齐方式，因为当我移除顶栏时，logo会居中，然而，将Google logo放在单独的div中并设置position:absolute;也不起作用。
这是指向我的项目http://codepen.io/wilfredbtan/pen/dXLxOz的链接
下面是顶栏和徽标html的片段：

<div id="container">
  <div id="topbar">
      <ul>
          <li>
              <a href="#">
                  <img src="the_odin_project/google-homepage/images/blueperson.jpg" style="border-radius: 100%" />
              </a>
          </li>
          <li>
              <a href="https://plus.google.com/u/0/notifications/all?hl=en">
                  <img src="the_odin_project/google-homepage/images/notification.png" />
              </a>
          </li>
          <li>
              <a href="https://www.google.com/intl/en/aboout/products/">
                  <img src="the_odin_project/google-homepage/images/apps.png" />
              </a>
          </li>
          <li><a href="https://images.google.com/">Images</a></li>
          <li><a href="https://mail.google.com/">Gmail</a></li>
      </ul>
  </div>
    <img style="" id="logo" alt="google" src="the_odin_project/google-homepage/images/google-logo.png" />
</div>

下面是相关CSS的一个片段：

body {
  margin: 0 auto;
  padding: 0;
}
#container {
  margin: 10px 0 0 0;
  text-align: center;
}
#topbar {
  margin: 25px 40px 0 0;
}
ul {
  list-style-type: none;
}
li {
  float: right;
  display: block;
  padding: 0 0 0 18px;
}
#topbar ul li {
  font: 12.5px Arial, sans-serif;
}
#topbar ul li:first-child {
  margin-top: -10px;
}
#logo {
  margin: 50px 0 10px 0;
  width: 35em;
  position: relative;
}