[CSS] Problème alignement

Bonjour,
Je suis actuellement en train de créer un site web n'utilisant que HTML et CSS.
Je mets en place le CSS pas à pas, mais j'ai un problème d'alignement dans mon <header>

J'ai mis des couleurs de background pour visualiser.
Dès que je mets du texte dans <h1> et <h2>, le header se décale :

Sans titre :
http://img703.imageshack.us/img703/9776/alignnormal.jpg
Avec tire :
http://img856.imageshack.us/img856/5864/aligndecale.jpg

Code HTML :

   <!-- HEADER -->
      <header>
        <!-- Logo -->
        <div id="logo">
        </div>
        <!-- Main Title -->
        <div id="main_title">
          <h1></h1>
          <h2></h2>
        </div>
      </header>
   <!-- END HEADER -->

Code CSS :

header {
  width: 900px;
  height: 128px;

  border-style: solid;
  border-color: blue;
}
#logo {
  display: inline-block;
  width: 128px;
  height: 128px;

  background-color: red;
}
#main_title {
  display: inline-block;
  width: 700px;
  height: 128px;
  margin-left: 30px;

  background-color: green;
}
header h1 {
  background-color: yellow;
}
header h2 {
  background-color: black;
}

Quelqu'un pourrait m'aider, s'il vous plaît ?