Ícones não posicionados corretamente | HTML5 e CSS3 II: Turbinando as suas páginas

Olá pessoal!

Estou com um problema que não consigo resolver, espero que me ajudem. Os meus ícones de Nome e E-mail não estão se posicionando corretamente. Eles estão ficando em cima da caixa de texto, tanto do e-mail quando do nome. Olhei, olhei mas não consegui encontrar o erro.

Me ajudem, por favor. Segue os códigos abaixo.

HTML - Contato

<!DOCTYPE html>

<html>
    <head>
    <meta charset="utf-8"/>
    <title>Contato</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/padrao.css"/>
    <link rel="stylesheet" href="css/contato.css"/>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>

    <body>
        <main>
            <h1 class="titulo-principal">Contato</h1>
            <div class="corpo-texto">
            <form>
            <fieldset class="teste">
            <legend class="legendas">Dados pessoais</legend>
            <label for="nome" class="com-icone">Nome</label>
                <input class="campos selected" id="nome" name="nome" placeholder="Escreva seu nome aqui" pattern="[A-Za-z ']{4,}" title="O nome precisa de pelo menos 4 caracteres." required autofocus>
            <label for="email" class="com-icone">E-mail</label>
                <input class="campos selected" id="email" name="e-mail" placeholder="seu@email.com" type="email" required>
            </fieldset>


            <fieldset>
            <legend class="legendas">Assunto</legend>

<!--
                <select name="assunto">
                    <option value="blog">Blog</option>
                    <option value="servico">Serviço</option>
                    <option value="outro">Outro</option>
                </select>
-->

            <label>
                <input type="radio" name="assunto" value="blog">    
                Blog
            </label>

            <label>
                <input type="radio" name="assunto" value="servico">
                Serviço
            </label>

            <label>
                <input type="radio" name="assunto" value="outro" id="outro">
                <label for="outro"+>Outro</label>
                <input class="selected" type="text">
            </label>

            </fieldset>

            <label for="msg" class="legendas">Mensagem</label>
            <textarea class="campos selected" id="msg" name="mensagem" cols="60" rows="10" placeholder="Escreva sua mensagem aqui"></textarea>
            <button class="button" type="submit">Enviar mensagem</button>    
            </form>
            </div>
        </main>

            <img class="foto-joao" src="img/eu.jpg" alt="Foto de João da Silva">
            <aside class="navegacao-site">
                <div>
                <h1>João da Silva</h1>
                <nav>
                    <ul class="icones-menu">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="bio.html">Sobre mim</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="formulario.html">Contato</a></li>
                    </ul>    
                </nav>
                </div>
                <ul class="icones-sociais">
                    <li><a class="github" href="https://github.com/joaodasilva" data-legenda="Veja meus projetos">Github</a></li>
                    <li><a class="twitter" href="https://twitter.com/joaodasilva" data-legenda="Veja meu Twitter">Twitter</a></li>
                    <li><a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" data-legenda="Veja meu currículo">LinkedIn</a></li>
                </ul>
            </aside>

            <article>
            <footer class="rodape-blog">&copy; João da Silva 2014</footer>
            <time datetime="2016-12-14">14 de dezembro de 2016</time>
            </article>           

    </body>

</html>

CSS

.legendas{
    font-weight: bold;
}

fieldset{
    margin-top: 15px;
    margin-bottom: 15px;
}

.selected:focus{
    background-color: #FFFFE0;
}
/*

label[for]{
    display: block;
}
*/

input[value="outro"] ~ input{
    display: none;
}

input[value="outro"]:checked ~ input{
    display: inline;
}
.selected:invalid{
    box-shadow: 0 0 3px red;
} 

.campos{
    width: 100%;
    margin-top: 2px;
    border: 2px solid #D3D3D3;
    padding: 10px;
    font-family: "Open Sans Condensed", serif;
    box-sizing: border-box;
    display: block;
}

.button{
    border-style: none;
    padding: .5em 1em;
    background-color: #3C1D3D;
    color: #F2FFFC;
    font-family: "Open Sans Condensed", serif;
    font-size: 25px;
    float: right;   
    margin-top: .5em;
}

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

.com-icone{
    position: relative;
}

.com-icone::after{
    content: "";
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-color: #8C1D3D;
    background-position: center center;
    width: 2em;
    height: 2em;
    position: absolute;
    top: 100%;
    left: 0;
}

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

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

Mergulhe em programação