J'ai un problème avec mon input, lorsque je garde le "transform : translate(-50% -50%)" en CSS, il est impossible de le sélectionner, ni lui, ni le button submit. Lorsque j'enlève la propriété "transform: translate(-50%, -50%)" l'input n'est sélectionnable qu'a sa moitié.
Aidez-moi svp les khey.

Le code HTML :

<div class="container">
		<div class="search-box">
			<input class="search" type="text" placeholder="Rechercher...">
				<button type="submit" class="search-btn">
					<i class="fas fa-search"></i>
				</button>
		</div>
	</div>

Le code CSS :

.container {
    width: 40%;
    position: relative;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.search-box{
    width: 100%;
    position: relative;
    display: flex;
}
.search{
    width: 100%;
    border: 3px solid #D21034;
    border-right: none;
    padding: 5px;
    height: 20px;
    outline: none;
    color: #FFFFFF ;
}
.search:focus{
    color: #000;
    box-shadow: 0 0 5px #D21034;
}
.search-btn{
    width: 40px;
    height: 36px;
    border: 1px solid #D21034;
    background: #D21034;
    text-align: center;
    color: #FFFFFF;
    border-radius: 0 5px 5px 0;
    font-size: 20px;
}

essaye de reproduire le problème ici parce que je vois pas ce que tu veux dire : https://jsfiddle.net/068nkh19/

Sur le container de ton .container utilise flex