画像縮小した時のレスポンシブについて

airbnbの模写してる初心者です。本家のHPみたいに　https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1578660995_OTk4MWQ4ZTc5MWVl　縮小した時、画像の左右の余白が徐々になくなる感じにしたいのですが設定がわからないです。回答よろしくお願いします。```HTMLここに言語を入力
コード

  <div class="top-img mb-2">  
  <div class="intro">  
    <h1 class="font-weight-bold mb-3">Airbnbホストになって、暮らしをレベルアップ</h1>  
    <p  class="font-weight-bold">どれくらいの収入が見込めるかチェック</p>  
    <div class="cp_iptxt">  
      <input type="text" placeholder="ロケーション">  
    </div>  
    <div class="d-flex">  
      <div class="cp_ipselect cp_sl01">  
        <select required>  
          <option value="" hidden>まるまる貸切</option>  
          <option value="1">まるまる貸切</option>  
          <option value="2">個室</option>  
          <option value="3">シェアルーム</option>  
        </select>  
      </div>  
      <div class="cp_ipselect cp_sl01 guest">  
        <select required>  
          <option value="" hidden>ゲスト4人</option>  
          <option value="1">ゲスト１人</option>  
          <option value="2">ゲスト2人</option>  
          <option value="3">ゲスト3人</option>  
          <option value="4">ゲスト4人</option>  
          <option value="5">ゲスト5人</option>  
          <option value="6">ゲスト6人</option>  
          <option value="7">ゲスト7人</option>  
          <option value="8">ゲスト8人</option>  
          <option value="9">ゲスト9人</option>  
          <option value="10">ゲスト10人</option>  
          <option value="11">ゲスト11人</option>  
          <option value="12">ゲスト12人</option>  
          <option value="13">ゲスト13人</option>  
          <option value="14">ゲスト14人</option>  
          <option value="15">ゲスト15人</option>  
          <option value="16">ゲスト16人</option>  
        </select>  
      </div>  
    </div>  
    <h1 class="font-weight-bold mt-4">￥76,857</h1>  
    <p>月あたり</p>  
    <button type="button" class="btn btn-danger intro-btn py-2 font-weight-bold">はじめる</button>  
  </div>  
 </div>
</div>

```CSSここに言語を入力
コード
```img {
  max-width: 100%;
}

.top-img {
  background: no-repeat center/cover url("https://osaka.j-hoppers.com/img/jh/osaka/main.jpg");
	padding: 90px 0;  
	width: 84%;
	margin: 0 auto;
	
}
.intro {  
background-color: white;  
width: 470px;  
padding: 2em;  
border-radius: 6px;  
margin: 0 0 0 auto;
margin-right: 80px;

}  

.intro h1{
	line-height: 1;
	display: inline-block;
}

.intro p {
	font-size: 13.5px;
	display: inline-block;
}

.intro-btn {
	width: 100%;
	height: 50px;
}
	
.cp_iptxt {
	position: relative;
	width: 100%;
  margin-bottom: 8px;
}
 
.cp_iptxt input[type=text] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	padding: 0.7em;
	border: 1px solid rgb(212, 223, 223);
	border-radius: 4px;
	outline: none;
}

	
.cp_iptxt input[type=text]:focus {
	border-color: #da3c41;
}

.cp_ipselect {
  overflow: hidden;
	width: 58%;
	/* margin: 2em auto; */
	
}
.cp_ipselect select {
  width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.cp_ipselect select::-ms-expand {
  display: none;
}
.cp_ipselect.cp_sl01 {
  position: relative;
	border: 1px solid rgb(212, 223, 223);
	border-radius: 4px;
	background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
  position: absolute;
	top: 0.8em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.cp_ipselect.cp_sl01 select {
  padding: 0.7em 38px 0.7em 8px;
	color: #666666;
}


.cp_ipselect:visited {
	border-color: #da3c41;
}

.guest {
	width: 38.5%;
	margin-left: 3.5%;
}

```ここに言語を入力
コード

行動規範の内容に同意します

回答1件

ベストアンサー

縮小した時、画像の左右の余白が徐々になくなる感じにしたいのですが設定がわからないです。

最大幅(max-width)をお好みに数値に設定すればいいでしょう。

css
1.top-img {  
2  background: no-repeat center/cover url("https://osaka.j-hoppers.com/img/jh/osaka/main.jpg");  
3  padding: 90px 0;    
4  max-width: 1140px;  /*追加*/
5  width: 100%;        /*変更*/
6  margin: 0 auto;  
7}