Alinhamento dos elementos | HTML5 e CSS3 II: Turbinando as suas páginas

<!doctype html>
<html>
    <head>
        <title>Estilizando inputs</title>
        <meta charset="utf-8" />
        <link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">

        <style type="text/css">
            @font-face {
              font-family: 'FontAwesome';
              src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
              src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
              font-weight: normal;
              font-style: normal;
            }

            div {
                position: relative;
                font-family: 'Catamaran', sans-serif;
                padding: 20px;
                border: 1px solid #000;
                margin: 0 auto;
                width: 30%;
            }

            label {
                color: #004080;
                display: block;
                text-transform: capitalize;
                font-weight: bolder;
            }

            label ~ label {
                margin-top: 15px;
            }

            label[for="nome"]::after {
                position: absolute;
                display: block;
                font-family: 'FontAwesome';
                content: "\f2c0";
                font-size: 2em;
                width: 1.48em;
                height: 1.48em;
                background-color: #004080;
                color: #99ccff;
            }

            label[for="email"]::after {
                position: absolute;
                display: block;
                font-family: 'FontAwesome';
                content: "\f1fa";
                font-size: 2em;
                width: 1.48em;
                height: 1.48em;
                background-color: #004080;
                color: #99ccff;
            }

            input {
                box-sizing: border-box;
                padding: 10px;
                width: 100%;
                font-size: 1.3em;
                border: 1px solid #004080;
                color: #004080;
                background-color: #99ccff;
                position: relative;
                left: 2em;
            }

        </style>    
    </head>

    <body>
        <div>
            <label for="nome">nome</label>
            <input id="nome" placeholder="Seu nome">
            <label for="email">e-mail</label>
            <input id="email" type="email" placeholder="seuemail@seudominio">
        </div>        
    </body>
</html>

Neste código não consigo centralizar os icones nem fazer com que os inputs se ajustem a div e ao inicio da caixa dos icones. Tentei seguir o exemplo da aula

@font-face { font-family: 'FontAwesome'; src: url('./dist/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('./dist/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('./dist/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('./dist/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('./dist/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('./dist/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .container{ position: relative; font-family: 'Catamaran', sans-serif; padding: 20px; border: 1px solid #000; margin: 0 auto; width: 30%; } input{ width:100%; border:#ddd solid 1px; float:left; padding:5px 25px 5px 5px; border: 1px solid #004080; color: #004080; background-color: #99ccff; } .icon{ float:left; margin:3px 0px 0px -20px; cursor:pointer } .iconUser:after{ font-family:FontAwesome; font-size:17px; content:"\f2c0"; font-weight:600; } .iconMail:after{ font-family:FontAwesome; font-size:17px; content:"\f1fa"; font-weight:600; } .inputgroup{ width:100%; bottom:10px; }

<div class="container"> <div class="inputgroup"> <label for="nome">Nome</label> <input type="text" /> <div class="icon iconUser"></div> </div> <div class="inputgroup"> <label for="nome">E-mail</label> <input type="text" /> <div class="icon iconMail"></div> </div> </div>