Eu consegui deixar os quadros nos lugares corretos, mas a página ainda continua do mesmo tamanho. | HTML5 e CSS3 I: Suas primeiras páginas da Web

Eu fiz o seguinte HTML:

<html>
    <head>
        <meta charset="UTF-8">

        <title>Portifólio - José da Silva</title>

        <link rel="icon" href="img/favicon.png">

        <link rel="stylesheet" href="css/reset.css">

        <link rel="stylesheet" href="css/site.css">

        <link rel="stylesheet" href="css/portifolio.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">Portifólio</h1>

            <div class="container">
                <figure class="bmw">
                    <img src="img/bmw.png" alt="Site da BMW">

                    <figcaption><a href="https://www.bmw.com.br/pt/index.html">BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript.</a></figcaption>
                </figure>

                <figure class="uol">
                    <img src="img/uol.png" alt="Site da uol">

                    <figcaption><a href="https://www.uol.com.br/">UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript.</a></figcaption>
                </figure>

                <figure class="ibm">
                    <img src="img/ibm.png" alt="Site da IBM">

                    <figcaption><a href="https://www.ibm.com/us-en/">IBM.com: reformulação de design e implementação de HTML, CSS e JavaScript.</a></figcaption>
                </figure>

                <figure class="g1">
                    <img src="img/g1.png" alt="Site da G1">

                    <figcaption><a href="https://g1.globo.com/">G1.com: reformulação de design e implementação de HTML, CSS e JavaScript.</a></figcaption>
                </figure>                
            </div>
        </main>

        <img class="minha-foto" src="img/eu.jpg" alt="Foto de João da Silva">

        <aside class="navegacao-site">
            <nav>
                <h1>João da Silva</h1>

                <ul>
                    <li><a href="index.html">Home</a></li>

                    <li><a href="portifolio.html">Portifolio</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 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-pagina">
            &copy; João da Silva 2018
        </footer>
    </body>
</html>

E no portifolio.css fiz:

igure {
    border: 8px solid black;
    padding: 16px;
    margin: 16px;
    width: 368px;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    background-color: #FAFFFC;
}

.uol {
    position: relative;
    left: 400px;
    bottom: 324px;    
}

.ibm {
    position: relative;
    bottom: 324px;
}

.g1 {
    position: relative;
    left: 400px;
    bottom: 648px;
}

.container {
    height: 640px;
}

Eu consegui o resulta. Mas na primeira tentativa de usar float e de colocar a largura como 50%, elas não se alinhavam. Nesse resultado final a página fica com o mesma altura que a blog.html e a bio.html, sobrando muito espaço. Como posso fazer de uma forma melhor?

Mergulhe em programação