Skip to main content
1 de 3

Input type no se agranda

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

introducir la descripción de la imagen aquí

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.

Codigo HTML:

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

Codigo 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;

}