Desalinhamento nas figures | HTML5 e CSS3 I: Suas primeiras páginas da Web

Ola, está acontecendo muitos problemas com o alinhamento das figures, este problema está relacionado ao tamanho da mesma e de seus componentes, por exemplo, com widht:45% o alinhamento fica perfeito e com 40% fica desalinhado.

html:

<!DOCTYPE html>
<html>

    <header>
        <meta charset="utf-8">
        <title>Portfofio - Joao da Silva</title>
        <link rel="icon" href="imgs/favicon.png">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="portfolio.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">
    </header>


    <body>
        <main class="ll">
            <h1>Portfolio</h1>
            <div>
                <h2>Veja abaixo a lista dos meus principais projetos:</h2>
                <ul class="figuras">
                    <li>
                        <a href="http://bmw.com">
                            <figure>
                                <img src="imgs/bmw.png" alt="Site da BMW">
                                <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="imgs/uol.png" alt="Front-page da UOL">
                                <figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>
                        <a href="http://www.ibm.com.br">
                            <figure>
                                <img src="imgs/ibm.png" alt="Site da IBM">
                                <figcaption>UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>
                        <a href="http://g1.com.br">
                            <figure>
                                <img src="imgs/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>
    </body>
</html>

portfolio.css:

main h1{
    background-color: brown;
    text-transform: uppercase;
    font-size: 60px;
    color: aliceblue;
    padding: 20px;
    text-align: center;
}

.figuras li{
    border: 10px solid black;
    margin: 8px;
    width: 40%;  /*  <----  */
    display: inline-block;
    height: 200px;
}

reset.css:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}