Как недопускать выхода 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>