Estoy haciendo un sitio web para dominar mejor HTML y CSS pero tengo un problema.

[![introducir la descripción de la imagen aquí][1]][1]


  [1]: https://i.sstatic.net/uRVYG.jpg

El problema es que el Input (El recuadro de Escribe tu direccion), solo lo puedo agrandar lateralmente usando px pero este es un problema si cambia la resolucion, si intento hacerlo con 90%, no se ocupa todo.


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .box{

      display: flex;
      justify-content: center;
      align-items: center;
      border: 5px solid black;
      background: #9b9b9b;
      height: 100px;
      width: 40%;
      margin: auto;
      border-radius: 10px;

    }


    .box .maps .direccion{

      width: 90%;
      height: 20px;

    }

<!-- language: lang-html -->

    <div class="box">
    	<div class="maps">
    		<input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    	</div>
    </div>

<!-- end snippet -->

```