Как недопускать выхода input за границу блока?

body { 
	width: 100%; 
	max-width: 640px; 
	margin: 0 auto; 
	padding: 0; 
} 
header { 
	top: 0; 
	 
	width: 100%; 
	max-width: 640px; 
	margin:0px auto; 
	position: fixed; 
  	z-index: 999; 
  	border-bottom: 1px solid rgba(0, 0, 0, .06); 
  	background: blue; 
} 
 
header .header { 
	padding: 10px; 
	display: grid; 
	grid-template-areas: 
		"search menu" 
	; 
	grid-template-columns: 1fr; 
} 
 
#headerSearchDiv form input[type="text"] { 
	padding: 8px; 
	width: 100%; 
	border: 2px solid yellow; 
	font-size: 13px; 
}

<header> 
            <div class="header"> 
                <div id="headerSearchDiv"> 
                    <form> 
                        <input type="text" name="" placeholder="Поиск"> 
                    </form> 
                </div> 
            </div> 
        </header>