Ícones de formulário mal posicionados | HTML5 e CSS3 II: Turbinando as suas páginas

Ao tentar posicionar os ícones ao lado do formulário, falhei e não consigo encontrar o erro. Segue o código.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Contato</title>
        <link rel="icon" href="imagens/favicon.png">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/site.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="container">
                <form>
                    <fieldset>
                        <legend>Dados Pessoais:</legend>
                        <label class="com-icone" for="nome">Nome</label>
                        <input name="nome-contato" id="nome" type="text"  required autofocus pattern="[A-Za-z ']{4,}" title="Letras maiúsculas e minúsculas, sem acentos, mínimo de 4 letras!">
                        <label class="com-icone" for="email">Email</label>
                        <input name="email-contato" id="email" type="email" required placeholder="seu@email.com">
                    </fieldset>
                    <fieldset>
                        <legend>Assunto:</legend>
                        <label>
                            <input type="radio" name="assunto" value="Blog">
                            Blog
                        </label>
                        <label>
                            <input type="radio" name="assunto" value="Serviços">
                            Serviços
                        </label>
                        <fieldset>
                            <input type="radio" name="assunto" value="Outro" id="outro">
                            <label for="outro">Outro</label>
                            <input type="text">
                        </fieldset>
                    </fieldset>
                    <label for="msg">Mensagem</label>
                    <textarea name="msg" id="msg" cols="60" rows="10" placeholder="Sua mensagem aqui!"></textarea>
                    <button type="submit">Enviar</button>
                </form>
            </div>     
        </main>
        <img src="imagens/eu.jpg" alt="Minha foto" class="minha-foto">
    <aside class="navegacao-site">
        <h1>João da Silva</h1>
        <nav>
            <ul>
                <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="contato.html">Contato</a></li>
            </ul>
        </nav>
        <ul class="icones-redes-sociais">
            <li>
                <a href="https://github.com/joaodasilva" data-tooltip="Veja meus projetos opensource" class="github">
                    Github
                </a>
            </li>
            <li>
                <a href="https://twitter.com/joaodasilva" data-tooltip="Siga-me no Twitter!"  class="twitter">
                    Twitter
                </a>
            </li>
            <li>
                <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" data-tooltip="Veja meus currículo" class="linkedin">
                    LinkedIn
                </a>
            </li>
        </ul>
    </aside>

    </body>

CSS

legend,
label[for="mensagem"] {
    font-weight: bold;
    margin-top: 1em;
}
label[for] {
    display: block;
}
input[type="text"],
input[type="email"],
textarea {
    font-family: inherit;
    font-size: 100%;
    padding: .25em .5em;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
fieldset > fieldset {
    display: inline;
}
label[for="outro"] {
    display: inline;
}
input[name="outro-assunto"] {
    width: auto;
}
input:focus,
textarea:focus {
    background-color: #FFD;
}
input:invalid {
    box-shadow: 0 0 3px red;
}
button {
    border: 0;
    padding: .5em 1em;
    font-family: "Open Sans Condensed", sans-serif;
    background-color: #3C1D3D;
    color: white;
    font-size: 1.2em;
    margin-left: auto;
    margin-top: 1em;
}
button:hover,
button:focus {
    background-color: #8C1D3D;
}
input[value="Outro"] ~ input {
    display: none;
}
input[value="Outro"]:checked ~ input {
    display: inline;
}
.com-icone +input {
    position: relative;
    left: 2em;
    width: calc(100% - 2em);
}
.com-icone::after {
    content: '';
    width: 2em;
    height: 2em;
    background-color: #8c1d3d;
    background-sized: 50% 50%;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 100%
    left: 0;
}
.com-icone[for="nome"]::after {
    background-image:url(../imagens/usuario.png);
}
.com-icone[for="email"]::after {
    background-image: url(../imagens/email.png);
}