【css】背景が切れたり要素の位置がおかしくなったりすることが....

Question

###表題の通り、背景が切れたり要素が、PCで画面幅を変えた際にずれることがあります。

作りとしてはcssで背景を配置して、html上で投下した画像などをその背景上に配置という形です。

<div class="back_img">
<div class="inner_img"><img src="img/img02.png"></div>
</div>

.back_img{
back-ground:url("img01.jpg")no-repeat center top;
background-size: 100%;
height: 100vw;
position: relative;
}

.inner_img{
  position:absolute;
  top: 10vw;
  left: 30vw;
  width: 70%;
}

で設定したい時に、たまに、画面幅を狭くしたりすると
img02.pngの位置がずれる

img01.jpgの高さがレスポンシブしない（画面幅を狭くすると切れて見えなくなる部分が発生する）

ということが起こります。
他の方が作成したhtmlとcssを編集しているから他のcssが働いてしまっているなどが
原因なのでしょうか？

解決したい内容

レスポンシブしても配置や画像の高さが対応してくれる一番いい方法を教えていただきたいです。
よろしくお願いいたします。

Answer 1

bodyに
min-width と max-width の設定がしてありました。
それゆえに vw を使ってもずれてしまったと思います。
こちらを

body{
width : 100% ;
}

に設定したら無事レスポンシブで対応してくれました。

Answer 2

img01.jpgの高さがレスポンシブしない（画面幅を狭くすると切れて見えなくなる部分が発生する）

画像の幅は画面幅一杯で、高さは画像の縦横比を維持した高さにしたいということでしょうか。
だとしたら、下記をご参考に。

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld

で設定したい時に、たまに、画面幅を狭くしたりすると

img02.pngの位置がずれる

現状、vw単位（画面幅基準）で top left を指定しているので、画面幅に合わせて移動すると思いますが、何を基準にずれるというのてしょうか。
何を基準としているのか、もう少し具体的に説明してください。