【レスポンシブデザイン】背景画像の下に要素が押し出されます

HTMLとCSSでランディングページを作成中です。

レスポンシブにすると背景画像にほかの要素が重なりません。
スマホで見た場合は下の画像の通リです。

背景画像のサイズは1080×5700pxです。
メディアクエリでも同じ画像をbackground-imageで設定しています。

色々調べたのですが解決策が見つかりません。
どなたかご教授いただければ幸いです。

よろしくお願いします。

◎HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link href="style.css" media="all" rel="stylesheet">
</head>
<body>
	<div class="bg-wrapper">
		<header>
			<img src="annie-spratt-Ef1H5YTTmZ8-unsplash.jpg"　alt="テスト">
			<h1>背景画像の下に</h1>
		</header>
	</div>
</body>
</html>

◎CSS

body {
	font-size: 1.8em;
	font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
	letter-spacing: 0.1em;
	line-height: 1.8;
	font-weight:600;
	color: #151414;
	margin: 0px;
	padding: 0px;
	
}


.bg-wrapper {
	width: 1080px;
	height: 5700px;
	background-image: url("bg-image.jpg");
	background-repeat: no-repeat;
	background-size: cover cover;
    margin-left: 200px;
}

header {
	max-width: 400px;
	height: 200px;
}

header img {
	padding-left: 388px;
	padding-top: 39px;
}

h1 {
	text-align: center;
}

/*ここからレスポンシブ*/
@media screen and (max-width: 560px) {

.bg-wrapper {
    width: 100%;
    height: 0;
 
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 527.77777777%;
 
    background-image: url("bg-image.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-left: 0px;
  }

img {
    width: 100%;
	
	}

header img {
    padding-left: 46%;
	}
}