background画像を画面幅いっぱいまで広げたい

Question

  <section class="bg">
      <div class="inner">
        <img src="img/part0_img01.png">
      </div>
    </section>

.bg {
  background: url(img/part1_img02.jpg) left/100% 100% no-repeat;
  position: relative;

  width: 100%;
  height: 500px;
  position: relative
}

.bg .inner {

  background-color: transparent;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #000), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #000), color-stop(.75, #000), color-stop(.75, transparent), to(transparent));
  -webkit-background-size: 4px 4px;
  width: 100%;
  height: 100%
}

.bg img {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

画面の両端に余白が10px ほどできてしまいます。
bodyにはmarginを０に設定しているので他に考えられる原因はなんでしょうか。

Comments

[masa_mf3]

bodyのpaddingも0にしていますか？

Answer 1

HelloMasaさんも指摘されていますが、user agent stylesheetの打ち消しがきちんとできているか確認してみると良いかもしれないです。
理由がわからない空白等が出て原因を知りたい場合は開発者ツールを使用すると原因を解明しやすくなりますので積極的に使用してみてください。

body {
  margin: 0;
  padding: 0;
}