スマホ時、サイトロゴをwidth="100%"にする

View post on imgur.com

こうなります。

上下の余白も削除したいです。
既存のフォーラムを見てコピペしましたが、環境が違うため消えませんでした。

子テーマstyle.cssに書いてあると思われる、

@media screen and (max-width: 30em){
  #header #h-top .alignleft {
    margin-left: 30px;
    width: calc(108%);
  }
}

を解除してから、以下のサンプルを見てみてください。

サンプル: ヘッダロゴ、アスペクト比を維持して100% | codepen
レスポンシブにしてあるので、リザルトとソースの境界線を左右に動かしてスマホサイズに画面幅をした時にピッタリなっていればこれでイケると思います。

サンプルのcssはscssで書いてあるので、css欄の下向きの三角メニューからview compiledを押してcssを表示し、それをコピペして子テーマstyle.cssに貼り付けてください。

それでまだ問題がある場合は、問題が出ているまま(どこに問題があるのか見るためです)レスもらえたら対応します。

遅くなってすいません。
今、CSSをコピペしたのですが、若干右にずれています…
そして、下ももう少し余白を小さくしたいなと思います。
どうすればいいでしょうか。
何度も何度も申し訳ございません。

@media screen and (max-width: 48em){
  #h-top .alignleft
}

このようなセレクタのところを、

#header #h-top .alignleft

こんな感じで、#headerを追加してみてください。

#headerの下にある余白は#bodyのmargin-topの値なので、

#body {
  margin-top: 0;
}

とひとまず入れて、どれぐらい必要かによってマージンの調整をしてください。
またインデックストップあたりに入っているブログロールの広告等がはみ出ているようです。ここらも調整が必要かと思います。

一旦、子テーマstyle.cssをバックアップして、内容を削除(あるいはコメントアウト)後、順番に再設定したほうが良いだろうと思います。特にネガティブマージン(-の値)が入っているような所は強引に位置調整したと見受けられる部分もあるのでそのあたりを中心に。

#header,#navi,#body,#footerの調整をしてから、その中身に当たる#header-in等の#xx-inを調整し、更にその中にある子要素を調整して、特に最初からブラウザのパディング等が設定してあるulやh1〜h6の見出しなどは慎重に調整しないとはみ出る可能性があります。

#header〜#footerに、overflow: hiddenを入れておいて、右側が途切れる等がある場合はその中身がはみ出ている可能性があるので、全体で見ずに大まかな塊で見ていくほうが良いかと思います。

今のcssの状態で前レスのサンプルを見てもらえばわかるように、本来はヘッダのロゴ部分に隙間はありません。もしヘッダがズレることがある場合は、このレスの説明ように、元のcssが余分なセレクタを指定しているとか、後で読み込まれるcssが何かしらを上書きしていると言う場合です。

これ以外にも、ヘッダは100%幅を指定していますから、#bodyよりも下にある要素で何かしらのはみ出しがあった場合は、ヘッダもそれにつられてはみ出します。
marginとpadding(特にpadding)の組み合わせ、javascriptなどでcssよりも後で読み込まれる要素のはみ出し、box-sizing: border-box指定がないpadding等はみ出す原因はたくさんあります。それらを修正する前に必要なのは、ネガティブマージン等の強引な位置合わせの修正です。

まずはなるべく素のhtmlの状態で表示してみて、できるだけレスポンシブに表示できるようにcssを調整するのが一番良いかと思います。