width: 100%の状態でCSSにて余白が発生

Question

###前提・実現したいこと
HTMLとCSSを使ってwebサイトを製作しています。そこで、バナー画像のようなものを載せたいのですが、なかなか思い通りの表示になりません。

###発生している問題・エラーメッセージ
横幅いっぱいにバナーを表示させたいものの、余白が発生してしまっております。

###該当のソースコード
html

<div class="boxB">
  <div class="box4">
    <div class="picture">
       <h2><img class="profile" src="/static/img/banner.jpg" alt=""></h2>
    </div>
  </div>
</div>

css

.boxB:after {
            /*①before,afterに適用 ②コンテンツ挿入*/
            content: "";
            width: 100%;
            margin: 0;
            /*要素を横に配列*/
            display: block;
            clear: both;
           }

.boxB {
}

.boxB .box4 {
      float: left;
      padding: -5px;
}

.picture h2 img {
  width: 100%;
  max-width: 100%;
  min-width: 900px;
  float: right;
  margin: 0;
}

###試したこと
width: 100%；の場所の変更などしましたが全てダメでした。

Answer 1

Chromeのデベロッパーツールなどブラウザーには開発ツールがついています。そのツールを使えば、どの要素にどのスタイルが適用されているかがわかりますので、何が現以下がわかると思います。
使い方はネットで調べてください。

Comments

[PYPP]

改めて検証してみたところ、bodyにmargin: 8pxがあるためでした。ありがとうございました。