ブロック要素と一緒に背景も高さを変える方法

Question

前提・実現したいこと

レスポンシブで幅を変えた時に
ブロック要素が背景からはみでないようにしたい。

幅１００％に設定している背景に、
ブロック要素を配置しています。

ブラウザの幅を縮めると、背景からブロック要素がレイアウトが崩れはみでてしまいます。
（メディアクエリが適用される前にはみでてしまいます）
高さをpxで設定しているからだと思うのですが、代替の記述がわかりません。

該当のソースコード

<section class="timefree">
	<div class="wrapper container">
	  <img src="img/sample.jpg" >
	  <div class="info">
		<h2 class="title">タイトル</h2>
		<p class="info-p">本文</p>
		<ol class="info-ol">
		  <li class="info-list">本文</li>
		  <li class="info-list">本文</li>
		</ol>
		  <a href="#" class="detail-btn">詳細はこちら</a>
	       </div>
             </div>
	</section>

css

.wrapper{
	max-width:1200px;
	margin:0 auto;
	padding:0 4%;
 }


.timefree{
	background:linear-gradient(90deg,#fff 0%,#fff 30%,#4bb681 30%,#4bb681 100%);
	min-height:450px;
}

.container{
	display: flex;
	justify-content: space-between;
	margin-top:85px;
	position:relative;
}

.container img{
	width:37%;
	z-index: 2;
	position: absolute;
	top:-30px;
	left:4%;
 }

.info{
	position: absolute;
	top:30px;
	left:40%;
	width:57%;
	padding:30px 18px 26px 80px;
	z-index: 1;
}

.title{
	font-size:1.6rem;
	color:#fff;
}

.info-p{
	font-size:0.98rem;
	color:#fff;
}

.info-ol{
	margin-top: 15px;
	counter-reset:number; /*数字をリセット*/
    list-style-type: none!important; /*数字を一旦消す*/
    padding:0.5em;
}

.info-list{
	background-color: #fff;
	position: relative;
    line-height: 1.5em;
    padding: 0.5em 0.5em 0.7em 45px;
	border-radius: 6px;
	margin-bottom: 10px;
}

.info-list:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #00b259;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 2%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}

.detail-btn{
	background: #ff9326;
    width: 240px;
    display: block;
    margin: 15px auto 20px;
    color: #fff;
    padding: 10px 0px 10px 0px;
    line-height: 1.0;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    transition: .5s all;
    position: relative;
	line-height: 1.5;
}

わかりづらく申しわけございません。
いろいろ調べたのですが自分ではわかりませんでした。
お忙しい中恐れ入りますが、お知恵をお借りできませんでしょうか。
よろしくお願いいたします。

Answer 1

.info{
    position: absolute;
    top:30px;
    left:40%;
    width:57%;
    padding:30px 18px 26px 80px;
    z-index: 1;
}

このcssでtopとleftに加え、paddingでも余白を指定しているからだと思います。
以下のように、padding指定を削除すればいいのではないでしょうか？

.info{
    position: absolute;
    top:30px;
    left:40%;
    width:57%;
    z-index: 1;
}

Comments

[shiratama_0826]

解決しました！お時間をいただき初歩的な質問にお答えくださり本当にありがとうございます。
勉強を続けていきます。