Как переместить набранный текст внутри элемента ввода?

Question

Я сделал несколько полей ввода с заполнителями 0 20px.Однако текст, который я набираю внутри, игнорирует отступы и начинается с точной левой стороны (с левого контура).Есть ли возможность разместить его внутри поля ввода?

HTML:

<div class="input-border">
    <label for="sign-login"><i class="fas fa-envelope"></i></label>
    <input type="text" name="sign-login" placeholder="Enter your Email">
</div>

CSS:

input::placeholder {
    font-size: 16px;
    font-family: $font-base;
    color: #979797;
    padding: 0 20px;
    height: 38px;
}

.input-border {
    width: 340px;
    margin: 10px 0;
    border: 1px solid #DEDEDE;
    border-radius: 0.5em;
}

Я хотел бы, чтобы текст, который я набираю, начиналсяиз того же места, что и мой заполнитель, в данном случае с отступом 0 20px.

Answer 1

CSS:

.center {
  text-align: center;
  margin: 0;
}

Answer 2

Используйте это, чтобы добавить заполнитель к заполнителю.

input::placeholder {
    padding: 0 20px;
}

Используйте это для добавления отступов к вводимому тексту.

input {
    padding: 0 20px;
}

Answer 3

нацелен на ввод текста [type = text] {padding: 0 20px;}

input::placeholder{
    font-size: 16px;
    font-family: $font-base;
    color: #979797;
    padding: 0 20px;
    height: 38px;}
  .input-border
    form .input-container .input-border {
    width: 340px;
    margin: 10px 0;
    border: 1px solid #DEDEDE;
    border-radius: 0.5em;}
    input[type=text]{padding:0 20px;}

<div class="input-border">
     <label for="sign-login"><i class="fas fa-envelope"></i></label>
     <input type="text" name="sign-login" placeholder="Enter your Email">
    </div>