Imagens em posições diferentes das caixas | HTML5 e CSS3 I: Suas primeiras páginas da Web

Olá, pessoal, estou com dificuldades em descobrir o que pode estar acontecendo aqui, pois as imagens estão aparecendo atrás da foto do "João da Silva" no menu de navegação. Elas estão lá, atrás do menu, enquanto as caixinhas estão certas em seus lugares.

<!DOCTYPE html>
<html>
<head>
    <!-- carrega a fonte Crimson Text nas versões normal, itálico e negrito -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">

    <!-- carrega a fonte Open Sans Condensed na versão negrito, -->
    <!-- que é a única necessária para os cabeçalhos            -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    <meta charset="utf-8">
    <title>Portfolio - João da Silva</title>
    <link rel="icon" href="img/favicon.png">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/portfolio.css">
    <link rel="stylesheet" type="text/css" href="css/site.css">
</head>

    <body>
        <main>
            <h1 class="titulo">Portfolio</h1>
            <div class="container">

                <p>Veja abaixo a lista dos meus projetos mais relevantes:</p>

                <ul class="portfolio">
                    <li>
                        <a href="http://bmw.com">
                            <figure>
                                <img src="img/bmw.png">
                                 <figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>

                    <li>
                        <a href="http://uol.com.br">
                            <figure>
                                <img src="img/uol.png" alt="Front-page da UOL">
                                <figcaption>UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>

                    <li>
                        <a href="http://www.ibm.com.br">
                            <figure>
                                <img src="img/ibm.png" alt="Site da IBM">
                                <figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption>
                            </figure>
                        </a>
                    </li>

                    <li>
                        <a href="http://g1.com.br">
                            <figure>
                                <img src="img/g1.png" alt="Front-page do portal G1">
                                <figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>
                </ul>
            </div>

        </main>

    <img src="img/eu.jpg" alt="foto joão da silva">
    <aside class="nav">

        <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="social">
                    <li><a class = "github" href="https://github.com/git-joaodasilva">Github</a></li>
                    <li><a class="twitter" href="https://twitter.com/twitter-joaodasilva">Twitter</a></li>
                    <li><a class="linkedin" href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508">Linkedin</a></li>
                </ul>

    </aside>

    <footer class="rodape">
        &copy; João da Silva, 2014
    </footer>
    </body>
</html>

css:

.portfolio li {
    display: inline-block;
    border: 8px solid black;
    background-color: #FAFFFC;
    width: 45%;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
}

Ah, e por algum motivo, quanto colo o width em 100% das imagens, elas ficam gigantescas.