1
resposta

não consigo alinhar um do lado do outro

estou fazendo um tipo de portifolio com a mesma base que é ensinada no curso, mas por algum motivo nao consigo colocar as imagens em inline-block.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sk Arquitetura</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <header>
      <div class="container">
        <img src="/img/logo.jpeg"alt="Sara Kathlyn"/>
      </div>
    </header>
    <main>
      <div class="projeto">
       <h1>Residência REVIT4U</h1>
       <p>A Residência REVIT4U foi reproduzido ao longo dos
          primeiros módulos do treinamento REVIT4U,
          lecionado pelo Engenheiro Vitor Cypriano Ayres.</p>
        <p>O trabalho foi totalmente desenvolvido no 
          ND 500, ou seja, seguindo parâmetros máximos de detalhamento e representação, tais como estudo solar, topografia, materiais e texturas, paredes com camadas, colunas estruturais, pisos e lajes com camadas,
           forro e entreforro, tabica, esquadrias e rodapés.</p>
      </div>
      <div class="imagens">
        <ul>
            <li>
              <img src="/img/revit4u/revit4u (1).jpeg" alt="Fachada Frontal" >
            </li>
            <li>
              <img src="/img/revit4u/revit4u (2).jpeg" alt="">
            </li>
            <Li>
              <img src="/img/revit4u/revit4u (3).jpeg" alt="">
            </Li>
            <li>
              <img src="/img/revit4u/revit4u (4).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (5).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (6).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (7).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (8).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (9).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (10).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (11).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (12).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (13).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (14).jpeg" alt="">
            </li>
            <li>
              <img src="/img/revit4u/revit4u (15).jpeg" alt="">
            </li>
        </ul>
      </div>
    </main>
    <footer>

    </footer>

  </body>
</html>
:root {
  --cor-primaria: #cbc0a7;
  --cor-secundaria: #fff;
  --cor-fonte: #000;
}
body {
  background-color: var(--cor-secundaria);
  border: solid 50px var(--cor-secundaria);
  text-align: center;
  font-family: 'mulish';
  margin: 0 auto;
}
/*HEADER*/

header {
  border-top: solid 70px var(--cor-primaria);
  border-left: solid 70px var(--cor-primaria);
  border-right: solid 70px var(--cor-primaria);
}
header .container {
  background-color: var(--cor-secundaria);
  margin: 0 auto;
}
header img {
  width: 35%;
  padding-bottom: 20px;
}
main .projeto {
  padding-top: 10px;
}

.projeto h1 {
  font-size: 1.5rem;
  letter-spacing: 2px;
}
.projeto p {
  line-height: 39px;
  font-size: 1.1rem;
  margin: 40px;
  letter-spacing: 3px;
}
main .imagens img {
  width: 40%;
}
main .imagens li {
  display: inline-block;
}
1 resposta

Fala Bruna, tudo bem?

Provavelmente isso esta ocorrrendo devido que você colocou a terceira tag de <li></li> em maiuscula. Caso o problema persistir, nos mande o seu código compactado por favor?

Espero ter ajudado :D