Как мне сделать выравнивание логотипа и меню в одну строку?

Question

[Frendy]

С помощью inline-block я сделал обычное меню для сайта, также я добавил text-align: center; для того чтобы выровнять его по центу страницы. Мне нужно добавить логотип в левой части меню и выровнять его на одном уровне с элементами меню, когда я это делаю с помощью float: left; происходит смещение и компонентов в меню в правую часть. Мне нужно сделать так, чтобы меню оставалось в центре.

Это заметно на скриншотах

<header class = "top_menu">
              <a id = "logo" href="test"><img src="images/left.png"/></a>
    			<ul>
    				<li><a href="test">TTT</a></li>
    				<li><a href="test">TTTR</a></li>
    				<li><a href="test">TT</a></li>
    				<li><a href="test">TTT</a></li>
    			</ul>
</header>

header{
	    display: block;
	    text-align: center;
	    background-color: #707070;
	    box-shadow: 1px 2px 3px 1px #999999;
	    margin: 0;
	    width: 100%;
	    z-index: 2;
	    position: fixed;
	    top: 0;
	    max-height: 45px;
	    overflow: hidden;}
        .top_menu ul{
	    padding: 0;
	    margin: 0;
    }
    .top_menu li{
        width: auto;
        height: 45px;
	    display: inline-block;
	    background-color: #707070;
	    list-style-type: none;
	    padding-left: 20px;
	    padding-right: 20px;
    }
    .top_menu a{
	    color: #ededed;
	    text-decoration: none;
	    display: block;
	    padding-top: 14px;
	    font-family: arial;
	    font-size: 17px;
	    text-align:  center;
    }
    #logo {
	    display: inline-block;
	    width: 40px;
	    height: 40px;
	    float: left;
	    padding: 4px;
    }

Answer 1

[iDevArtem]

#logo {
      position: absolute;
      width: 40px;
      height: 40px;
      left: 0;
      top: 0;
      padding: 4px;
}

Comments

[Frendy]

Возможно ли это как-то сделать не используя абсолютное позиционирование?

[iDevArtem]

#logo {
  float: left;
  width: 40px;
  height: 40px;
  padding: 4px;
}
.top_menu {
  ...
  margin: 0 48px;
  ...
}

[Frendy]

ArtemDoink, спасибо