o input do nome e email não está reposicionando, posicionamento absolute | HTML5 e CSS3 II: Turbinando as suas páginas

cod css

.com-icone::after {
    content: ''; /* não podemos esquecer do 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;
}
/*definindo o elemento <label> como referência*/
.com-icone {
    position: relative;
}
/*posicionando o ícone na linha do campo, no canto esquerdo*/
.com-icone::after {
    position: absolute;
    top: 40%;
    left: 0;
}
/*jogando o campo para o lado*/
/* reduzindo a largura dos campos com ícones usando a propriedade width com a função calc()*/
.com-icone + input{
    position: relative;
    left: 2em;
    width: calc(100% - 2em);
    margin-top: 0;
}
/*colocando os ícones como imagens de fundo*/
.com-icone[for="nome"]::after {
    background-image: url(usuario.png);
}
.com-icone[for="email"]::after {
    background-image: url(email.png);
}

cod html

<!DOCTYPE html>
<html>
    <head>
        <title>Contato</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="reset" href="reset.css">
        <link rel="stylesheet" href="CSS%20II.css">
    </head>
    <body>
        <main>
            <h1>Contato</h1>
            <div class="container">
                <form>
                    <fieldset>
                        <legend>Dados Pessoais</legend>
                        <label for="nome" class="com-icone">                        
                            Nome
                            <input id="nome" name="nome" placeholder="Seu nome aqui" type="nome" required autofocus pattern="[A-Za-z]{3,}"title="O nome precisa ter pelo menos 3 caracteres">
                        </label>                    
                        <label for="email" class="com-icone">
                            E-mail
                            <input id="email" name="email" placeholder="Seu@email.com" type="email" required>
                        </label>
                    </fieldset>
                    <fieldset>
                        <legend>Assunto</legend>
                        <label>
                            <input type="radio" name="assunto" value="consultoria">
                            Consultoria
                        </label>
                        <label>
                            <input type="radio" name="assunto" value="outro">
                            Outro
                        </label>
                    </fieldset>
                    <fieldset>
                        <legend>Mensagem</legend>
                        <label for="msg"></label>
                        <textarea  id="msg" name="msg" cols="30" rows="6" required></textarea>
                        <button type="submit">Enviar <strong>para min</strong></button>
                    </fieldset>
                </form>
            </div>
        </main>
        <img src = "Foto.jpg" alt="Foto de Arlan Moura"  class="img">
        <aside>
            <nav>
                <h1>Site</h1>
                <ul>
                    <li><a href="HTML%20I.html">Home</a></li>
                    <li><a href="https://www.visualcv.com/arlan-gm">Currículo</a></li>
                    <li><a href="https://cursos.alura.com.br/user/arlan-moura">Certificado</a></li>
                </ul>
            </nav>
            <nav>
                <ul class="icon-social">
                    <li><a class="github" href="https://github.com/arlangmoura">GitHub</a></li>
                    <li><a class="linkedin" href="https://www.linkedin.com/in/arlan-guimar%C3%A3es-moura-52a38498/">Linkedin</a></li>
                </ul>
            </nav>            
        </aside>
        <footer>
            &copy; Arlan Guimarães Moura
        </footer>
    </body>
</html>

Queria entender o porque do método com pseudoelemento na parte do input não funcionou?

obs: outra dúvida, no posicionamento das imagens em absolute, o top (para ficar nivelado ao input) é de 40%(no meu caso).

isso tem haver com a class container?

.container{
    width: 720px;
    margin: auto;
    padding: 40px 0;
}

ou tem haver com o font-size do html ou main?

html{
    font-size: 120%;
}
main{
    float: left;
    width: 85%;
    padding-bottom: 80px;
}

Grato desde já

Mergulhe em programação