Why is this div being displaced downwards?

Question

Why oh why is the the 'name' div being displaced downwards? Why would it not be fitting inside its container div? I cannot figure out what is going on!?

header {
            width: 100%;
            height: 100px;
            background: rgb(46, 46, 56);
        }
        #logo {
            display: inline-block;
            width: 95px;
            height: 100px;
            text-align: center;
            padding: 12px;
            padding-left: 0px;
        }
        #name {
            display: inline-block;
            width: 100px;
            height: 100%;
            line-height: 100px;
            border: solid 1px red;
        }

<header>
        <div id="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/An_up-close_picture_of_a_curious_male_domestic_shorthair_tabby_cat.jpg/1024px-An_up-close_picture_of_a_curious_male_domestic_shorthair_tabby_cat.jpg" alt="" width="65" height="76"></div>
        <div id="name">title</div>

    </header>