ヘッダーロゴ上下の余白を削除したい

結構な修正がいりますが、まず

#header {
  margin: 0;
}

#h-top .alignleft {
  width: calc(100% - 40px);
  margin: 0;
}

#site-title {
  margin: 0;
  height: 0;
  padding-top: 25%;
  position: relative;
}

#site-title img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

これで周りのブロックが画像のサイズと同じになるはずです。で、これらをスマホのサイズの時にということで、例えば

@media screen and (max-width: 30em){
  //上記のスクリプト
}

※ 30em ≠ 480px (16*30)

とすれば、30emまでなら上記のままになります。

縦向きのスマホ画面で試してみると、ロゴの画像の解像度もあるため、まぁ768px(48em)ぐらいまでは上記のままで問題なかろうと思います。だいたいの所、iphone6plusの横向きぐらいです。
それよりも大きくなった場合でもレスポンシブにアスペクト比は維持しながら追従しますが、768px以上の時は.alignleftのwidthを60%(か任意のサイズ)にして、margin: 0 autoを追加すればセンターに寄ります。もしこの時に上下にマージンがほしければ、margin: 0 autoの0を10pxとか、margin:5px auto 10pxとかいろいろと調整できます。

.alignleftのwidthは%だとどこまでも大きくなっていくために、画像のオリジナルサイズ640pxを入れたら画像の100%になると覚えておいてください。画像が640pxで最大ですから、768px以上の時は640pxのほうが良いかもしれませんね。

@media screen and (max-width: 48em){
  //上記のスクリプト
}
@media screen and (min-width: 48em){
  #h-top .alignleft {
    width: 640px;
    margin: 0 auto;
  }
}

こんな感じでしょうか。

注意点としては、このcssは最終出力なら正常に動作するかと思いますが、仮に子テーマstyle.cssに上記を書いたとして、mobile.cssで何かしらが上記スクリプトの一部を上書きをした場合は、その箇所で問題が発生すると思うので、何かしらおかしいなと思ったらmobile.css等子テーマstyle.cssよりも後で読み込まれるファイルをチェックしてみてください。

■上記スクリプトの仕組み
まず#headerですが、おそらく画像の調整をされるためにネガティブマージンが入っていましたので、margin:0としてマージンをなくすということをしています。

画像は#h-topの中の.slignleftの中の#site-titleにimgとして入っています。imgはデフォルトでインライン要素なので隙間をなくすためには必ずdisplay: blockでブロック要素にします。画像自体は縦横比が変わらないようにして、その親のサイズに追従するようにします。

元々の画像サイズが640x160pxだったので、(160/640)*100で、25(%)つまり、横が100%の時に縦が25%のアスペクト比だということがわかります。この25%が維持できたら、画像自体は100%でも勝手に親のサイズに追従するわけです。よって、#h-top .alignleftの横サイズがxのとき、その縦は25%であるというふうにすればよいわけです。

で、ハンバーガーメニューが元々のcssでは30pxぐらいで避けているようでしたが、40pxぐらいないと重なるみたいでしたので、calcを利用して、100%の横幅から40pxを引いたサイズが前述の横サイズxにあたります。100%はいわば#header-inであったり、#headerのサイズになります(#header-inの設定による)。

#site-titleは、marginとheightをなくしてpadding-topで高さを確保します。ここが25%になるわけです。position: relativeを入れておくことで、その中のimgにposition: absoluteの起点にします。

画像は親のブロクの幅と高さにアスペクト比を保った状態の100%幅で追従しますから、absoluteの位置は、top:0、left:0で良いわけです。位置の調整は、その親に対して行います。この場合は.alignleftですね。

まぁ大体の所こんな感じです。

☓ 画像は#h-topの中の.slignleftの中の
○ 画像は#h-topの中の.alignleftの中の

☓ 画像は親のブロクの幅と高さにアスペクト比を
○ 画像は親のブロックの幅と高さにアスペクト比を

hidekichiさん

本当に懇切丁寧にありがとうございます。
しかし難しい…。インラインからブロック要素にすることが重要だったのですね。
mobile.cssに追記してあった記述を削除したら無事綺麗に表示ができました。
http://www.pokego-news.net/
解決しました！

後学のために一点お聞きできたらと思いますが、

@media screen and (max-width: 30em){
  //上記のスクリプト
}

これを使うのと、

mobile.cssに直接　#header {　を記述するのは、意味合い的にどう違うのでしょうか。

mobile.cssはモバイル端末と判断された時に子テーマ(親テーマ)のstyle.cssよりも後に読み込まれるcssです。同じセレクタの同じプロパティは後から読み込まれたものが優先されるため、モバイル端末と判断された場合はstyle.cssをmobile.cssが上書きします。

メディアクエリを使うのは、style.cssでもmobile.cssでも同じことですが、同じメディアクエリならmobile.cssに書いたほうが優先度が高いです。ただし、mobile.cssは完全レスポンシブがoffの場合のみ有効です。

次にメディアクエリですが、今ちょうど説明すべき内容とリンクした状態になっているので確認してもらえると思いますが、今阿部さんのサイトはmax-width:30emで修正されましたよね？
では30em(480px)より幅の広い端末で見た場合どうなるでしょうか？

だいたいのスマホは縦向きで見る場合、480pxよりも横幅は小さいので修正された内容でうまく行っているように見えますが、横向きにした場合はその条件より外れてしまいます。
そのため回答では48em(768px)でどうですか？と言うような内容も書きました。この場合は、

@media screen and (max-width: 48em) {
  .test {
      font-size: 14px;
     //その内容...略...
   }
}
@media screen and (max-width: 30em) {
  .test {
      font-size: 12px;
     //その内容...略...
   }
}

このように、ブレイクポイントを増やすことでその時の画面サイズに対してどうスタイルするかを指定できます。mobile.cssに書いても優先度が変わるだけでstyle.cssと同じことです。
逆を言えばSimplicityはメディアクエリを極力書かずにモバイル端末のスタイルができるようにmobile.cssがありますが、本来で言えばmobile.cssは必要とせずstyle.cssに書けば事足りるわけです。

その時々の画面サイズの指定をメディアクエリで行えば良いと言うのが理解されたら、おそらく48emで全体的な設定をして、それよりも画面が小さい端末の時にもし何かしらがあった場合は30emでそのセレクタのスタイルを上書きすれば良いと言うのがわかってもらえるだろうと思います。

で、ここらを踏まえて、今サイトを見て修正したほうが良いかなと思ったのは、モバイル中間サイズがどうのという実装でメディアクエリに500px指定で、margin-leftとmargin-rightが入っています。中身をセンタリングするためのスタイルかと思いますがこれは必要ありません。

30emの場合はおそらく上記marginが効いてしまうのでロゴがセンタリングされて、ハンバーガーメニューにロゴが重なってしまってます。48em指定では500px < 48em(768px)なので、必要ないかと思うんですけれども、cssのセレクタと言うのは書き方によっては別物とされる場合もあるので、メディアクエリ内で、

#h-top .alignleft {
  width: calc(100% - 40px);
  margin: 0 !important;
}

とするか、

#header #h-top .alignleft {
  width: calc(100% - 40px);
  margin: 0;
}

みたいに、narrow.cssのメディアクエリ幅500px指定を上書きできるように(あるいは上書きできないようにして)セレクタを指定する必要があるかと思います。

また、
> インラインからブロック要素にすることが重要だったのですね。

これもそうですが、一番重要なのはサイズをpx固定せずに画像のアスペクト比を維持しながら親要素に追従する、つまりレスポンシブにすると言うことです。要素のタイプが仮にインラインの場合はもっとずっと隙間は小さいはずです。