How to position the placeholder

Question

How can I position the placeholder? I created a input but the digitable field does not follow, as in the example image:

.inpt {
    border: none;
    background-color: #EBEBEB;
    padding: 3% 20%;
    margin-top: 4%;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: left;
}

<form method="POST">
    <input name="nome" type="text" class="inpt" placeholder="Nome">
</form>

Answer 1

A ìnput text type does not have space on the sides between its contents and the border.

This behavior is the result of padding: 3% 20%, that is "flooding" its element in 3% for top and bottom and 20% for left and right.

Remove the padding or adjust it to another value. The guide lines of design material indicate 12 dps for this spacing.

.inpt {
    border: none;
    background-color: #EBEBEB;
    padding: 12px 16px 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 20px;
}

<input name="nome" type="text" class="inpt" placeholder="Nome">

Answer 2

If I understand correctly, you want to remove the space, but keep the placeholder in the center, right?! As the staff said, the space is caused by your padding, just take it. But if you want to keep the placeholder in the center, you can use only one text-align: center, thus:

<input type='text' placeholder="Nome" style="text-align: center" />

However, note that even the normal text was aligned to the center. This we can solve with a little Javascript, like this:

// Quando a tela estiver carregada...
window.onload = function() {
  // Reconhece cada input na tela
  var inputs = document.getElementsByTagName('input');
  // Aqui fazemos um loop passando por todos os inputs
  for (var i = 0; i < inputs.length; i++) {
    // Essa linha é pra chamar a função em cada um dos inputs quando a tela for carregada
    mudarPlaceholder(inputs[i]);
    // Aqui falamos que pra cada tecla que o usuário apertar no input
    inputs[i].setAttribute('onkeyup', 'mudarPlaceholder(this)');
  }
};

// Função para mudar a centralização
function mudarPlaceholder(that) {
  // Se o input estiver vazio
  if (that.value === '') {
    // Tira a classe normal
    that.classList.remove('normal');
    // Centraliza o placeholder
    that.classList.add('centralizado');
  } else {
    // Senão, tira o centralizado do input
    that.classList.remove('centralizado');
    that.classList.add('normal');
  }
}

.centralizado {
  text-align: center;
}

.normal {
  text-align: left;
}

<input type="text" placeholder="Nome" />