縮小すると要素がはみ出てレイアウトが崩れてしまう

Question

架空のサイトを作っているのですがPCサイズからスマホサイズくらいに画面を縮小すると.top h1の白い枠が縦にはみ出たり、input type="text"の部分のレイアウトもはみ出てしまうのですが、縮小してもはみ出さないようにするにはどのようにしたらいいのでしょうか。

.top{
	position:relative;
	text-align:center;
	width:70%;
	margin:0 auto;
}	

.top img{
	width:100%;
	height:auto;
}	
.top h1{
	
	position:absolute;
	word-wrap:break-word;
	background-color:white;
	border-radius:3px;
	width:27%;
	padding:40px 0 320px 5px;
	color:#323232;
	font-size:20px;
	font-weight:bold;
	top:150px;
	left:3%;
}

.top input{
position:absolute;
bottom:400px;
right:730px;
}
コード

<div class="top">
  <img src="img/eclair-3366430_1920.jpg" alt="ようこそ">
  <h1>ケーキをデリバリー注文する</h1>
	<input type="text" value="東京" name="area" size="40">
	</div>
コード