3
respostas

Tamanho das caixinhas

Também estou com um problema no tamanho das caixinhas; quando coloco o "width: 45%", a caixinha do G1 aparece menor que as outras. Se coloco "width:44%", por exemplo, elas ficam iguais. O que pode estar dando errado? Segue o HTML e CSS:

portfolio.html

<main>
            <h1 class="titulo-principal">Portfolio</h1>
            <div class="container">
                <p>Veja abaixo a lista dos meus projetos mais relevantes</p>
                <ul class="portfolio">
                    <li>
                        <a href="https://bmw.com">
                            <figure>
                                <img src="img/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="https://uol.com.br">
                            <figure>
                                <img src="img/uol.png" alt="Site 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="https://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 de back-end</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>
                        <a href="https://g1.com.br">
                            <figure>
                                <img src="img/g1.png" alt="Site do G1">
                                <figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>
                </ul>                
            </div>
        </main>



portfolio.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;
}

.portfolio img {
    width: 100%;
}
3 respostas

Oi tudo bem? Coloquei seu código e os css do professor (menos o portifolio.css dele) e para mim aparece normal.

Dá uma olhada https://codepen.io/anon/pen/gZmdvZ

Que browser e versão você está usando?

Estou usando o Chrome, e continua dando o mesmo resultado. Vou tentar abrir no Safari aqui, pra ver se dá muda alguma coisa . Obrigado!

Ok dinada! Qualquer coisa me avisa.