A caixa do input não se move para a direita. Não consigo achar o erro

#nome, 
#email,
#mensagem {

width: 100%;
height: 30px;
border: 1px solid #d7d7c1;
padding: .25em .5em ;
font-family: inherit;
font-size: inherit;
box-sizing: border-box;
}

fieldset > fieldset { 
    display: inline;
}

label[for="outro"] { 
    display: inline;
}

input[name="assunto"] {
    width: auto;
}

#mensagem {
width: 100%;
height: 50%;
border: 1px solid #d7d7c1;
font-family: inherit;
}



input:focus,       
textarea:focus {
    background-color: #FFD;
}

input:invalid {          
    box-shadow: 0 0 3px red;
}

form {

    margin-top: 40px;
}
.botao-form {

    border: 0;
    padding: .5em 1em;
    font-family: "Open Sans Condensed", sans-serif;
    background-color: #3C1D3D;
    color: white;
    font-size: 1.2em;
    /* Faz com que o botão apareça na direita */
    margin-left: auto;
    margin-top: 1em;
    display: block;
}

.botao-form:hover,
.botao-form:focus {
    background-color: #8C1D3D;
}

.com-icone::after {
    content:"";
    width: 2em;
    height: 2em;
    background-color: #8C1D3D;
    background-size: 50% 50%; /* para a imagem ter 1em x 1em */
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 100%; /*posicionar o ícone na linha do campo, no canto esquerdo*/
    left: 0;
}

.com-icone {
    position: relative;
}

.com-icone + input {    
    position: relative;
    width: calc(100% - 2em);
}  

.com-icone[for="nome"]::after {
    content: "";
    background-image: url(../imagens/usuario.png);
}

.com-icone[for="email"]::after {
    content: "";
    background-image: url(../imagens/email.png);
}