【Airbnb模写】画像が幅いっぱいにならない（スマホ版レズポンシブ対応時）

Airbnbの模写をしていますが、画像が幅いっぱいに表示されず途切れてしまいます。

ググって見たのですが、解決できませんでした。

何でも構いませんので、ご教授お願い致します。

【状況】
header右側部分の画像が途切れてしまう。

【HTMLコード】

<body class="body"> <header> <div class="header-cover"> <nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm bg-white fixed-top">  <a class="navbar-brand" href="#"><i class="fab fa-airbnb fa-2x"></i></a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">概要</a> </li> <li class="nav-item"> <a class="nav-link" href="#">準備</a> </li> <li class="nav-item"> <a class="nav-link" href="#">安全</a> </li> <li class="nav-item"> <a class="nav-link" href="#">マネープラン</a> </li> </ul> </div> </nav> </div>  <div class="container d-md-block dinone"> <div class="bg-white p-4 border-light header-form"> <form> <div class="form-group"> <div class="h1">Airbnbホストになって、暮らしをレベルアップ</div> <label for="formGroupExampleInput">どれくらいの収入が見込めるかチェック</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="大阪"> </div> <form> <div class="form-row"> <div class="col"> <select type="text" class="form-control"> <option value="">まるまる貸切</option> <option value="">個室</option> <option value="">シェアルーム</option> </select> </div> <div class="col"> <select type="text" class="form-control"> <option value="">ゲスト1人</option> <option value="">ゲスト2人</option> <option value="">ゲスト3人</option> </select> </div> </div> <p><span class="font-weight-bold h2">¥ 145,228</span>月あたり</p> <button class="btn btn-danger w-100" type="button" name="bundle">はじめる</button> </form> </form> </div> </div> </header>

【cssコード】
/* PC・タブレット・スマホ共通の設定 */
.header-cover {
background: url("image/image4.jpg");
background-size: cover;
width: 100%;
height: 750px;
position: relative;
padding: 0;
}