Different CSS items not in line

Question

I have a h1 a element and many li a elements that I would like to put in the same line.

My problem is that the h1 is aligned at the top, while the rest are aligned at the baseline.

h1 shows a display block,
h1 a shows a display inline,
ul shows a display block,
ul li shows a display list-item,
ul li a shows a display inline.

http://jsfiddle.net/jz2ufv5a/

HTML:

<div id="header" class="clearfix">
    <div id="logo">
         <h1>
            <a href="#">Studio</a>
        </h1>
    </div>
    <div id="menu">
        <ul>
            <li><a href="#">Work</a></li>
            <li><a href="#">Play</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Shop</a></li>
        </ul>
    </div>
</div>

CSS:

#header {
    background-color: blue;
    margin: 60px 0 120px 0;
    font-family:'PT Mono';
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: #444;
}
#logo {
    background-color: #f32;
    float: left;
}
#logo h1 {
    font-size: inherit;
    margin: 0;
}
#logo a {
    color: inherit !important;
    font-size: inherit !important;
    text-decoration: none;
}
#menu {
    background-color: #f3f;
    float: right;
}
#menu li {
    list-style-type: none;
    float: left;
    margin-left: 10px;
}
#menu a {
    text-decoration: none;
}
#menu a:link, #menu a:visited {
    color:#444;
}
#menu a:hover, #menu a:focus, #menu a:active, #menu a.currentPage {
    color:#fed356;
}

Answer 1

it's the default margin that gets applied to ul elements. It's good practice to use some kind of CSS reset. I typically just set padding: 0; margin: 0; globally on all elements. Add:

#menu ul {
  margin: 0;
}

FIDDLE