background-imageのサイズを調節したい

サイトを模写コーディングしているのですが、
見本サイトとヘッダー画像のサイズが合わず困っています。
background-imageで背景画像に設定しています。
素材ファイルは、同じものを使用しています。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>チョコバッド</title>
6<link href="css/reset.css" rel="stylesheet" type="text/css">
7<link href="css/style.css" rel="stylesheet" type="text/css">
8</head>
9	
10<body>
11<header class="header_main">
12     <img src="img/header/menu_bg.png" alt="menu">
13	<div class="nav_img">
14	 <h1 class="logo"><a href="#"><img src="img/header/logo.png" alt="三立"></a></h1>
15	 <img src="img/header/light.png" alt="ライト">
16	<ul class="nav_menu">
17		<li>HOME</li>
18		<li>歴代の名チョコバッター</li>
19		<li>わくわくダウンロード</li>
20    </ul>
21	</div>
22</header>
23</body>
24</html>
25

css
1@charset "utf-8";
2/* CSS Document */
3
4html{
5	font-size:62.5%;}
6html,p,ul,ol,li,a{
7  text-decoration:none;
8  list-style:none;
9}
10
11@media screen and (-webkit-min-device-pixel-ratio:0) {
12	::i-block-chrome, body {
13		font-feature-settings: "pkna";
14	}
15}
16body{
17	color:#ffffff;
18	background-color:#000000;
19	text-align:center;
20	font-size:1.6rem;/* 16px */
21	line-height:2;
22	-webkit-text-size-adjust: 100%;
23  font-feature-settings: "palt";
24}
25
26img{
27	vertical-align: bottom;
28}
29
30/* header開始 */
31/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
32.header_main{
33	position: relative;
34	width:100%;
35	height:550px;
36	padding-top:43.1%;
37	box-sizing:border-box;
38	background:url("../img/header/bg.jpg") center center no-repeat;
39    background-size:cover; 
40}
41.header_main >img{
42	position:absolute;
43	left:572px;
44	bottom:590px;
45	z-index: 50;
46}
47.nav_img{
48	display:flex;
49	margin:auto 0 ;
50	position:absolute;
51	left:572px;
52	bottom:598px;
53	z-index: 60;
54}
55logo{
56	padding: 10px;
57}
58.nav_menu{
59	display:flex;
60	font-size:16px;
61	border:solid 1.5px #fff;
62}
63