HTML/CSS - lists next to images

Question

Hello, I’ve just started dealing with HTML5/CSS and I’m doing some tests and I came across a difficulty. I’m trying to align four lists next to an image, but it doesn’t align.

The example I’m basing it on is this: https://prnt.sc/xz2029

Follow my code below:

index.html

.conteudo-servicos {
    width: 1100px;
    margin: 0 auto;
    padding: 0px 48px;
    color: #000080;
    font-size: 25px;
}

.conteudo-servicos ul {
    display: inline-block;
    padding: 15px;
}

<div class="conteudo-servicos">
    <ul>
        <li>DEPARTAMENTO LEGAL</li>
        <li>- Abertura de Empresa</li>
        <li>- Alterações</li>
        <li>- Regularidade Fiscal</li>
        <li>- Licenciamento e Cadastros</li>
    </ul>
    <ul>
        <li>DEPARTAMENTO FISCAL</li>
        <li>- Documentos Fiscais</li>
        <li>- Registro de Entradas e Saídas</li>
        <li>- Apurações Tributárias</li>
        <li>- Entrega das declarações</li>
    </ul>
    <ul>
        <li>DEPARTAMENTO PESSOAL</li>
        <li>- E-Social</li>
        <li>- Registro de Funcionários</li>
        <li>- Folha de Pagamento</li>
        <li>- Gestão de Risco Trabalhista</li>
    </ul>
    <ul>
        <li>DEPARTAMENTO CONTÁBIL</li>
        <li>- Balanço Patrimonial</li>
        <li>- Demonstração de Resultados</li>
        <li>- Análise Econômico Financeiro</li>
        <li>- Índices de Endividamento</li>
    </ul>                        
    <img src="newimg/14.png">
</div>

Answer 1

Man if you want something more sophisticated I recommend you use display:grid, but if you want something really fast and easy you could separate the 4 UL in a container and place the property in it column-count: 2; this will divide the container into two columns, each with 2 UL, and the image is to the right of this container with column-count

It’ll look like the picture

Follows code

.conteudo-servicos {
  width: 1100px;
  margin: 0 auto;
  padding: 0px 48px;
  color: #000080;
  font-size: 25px;

  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
}

.listas {
  column-count: 2;
}
.listas > ul {
  margin: 0 auto 20px;
}

<div class="conteudo-servicos">
  <div class="listas">
    <ul>
      <li>DEPARTAMENTO LEGAL</li>
      <li>- Abertura de Empresa</li>
      <li>- Alterações</li>
      <li>- Regularidade Fiscal</li>
      <li>- Licenciamento e Cadastros</li>
    </ul>
    <ul>
      <li>DEPARTAMENTO FISCAL</li>
      <li>- Documentos Fiscais</li>
      <li>- Registro de Entradas e Saídas</li>
      <li>- Apurações Tributárias</li>
      <li>- Entrega das declarações</li>
    </ul>
    <ul>
      <li>DEPARTAMENTO PESSOAL</li>
      <li>- E-Social</li>
      <li>- Registro de Funcionários</li>
      <li>- Folha de Pagamento</li>
      <li>- Gestão de Risco Trabalhista</li>
    </ul>
    <ul>
      <li>DEPARTAMENTO CONTÁBIL</li>
      <li>- Balanço Patrimonial</li>
      <li>- Demonstração de Resultados</li>
      <li>- Análise Econômico Financeiro</li>
      <li>- Índices de Endividamento</li>
    </ul>
  </div>
  <img src="https://via.placeholder.com/200x200.png?text=EU%20SOU%20UM%20PLACEHOLDER">
</div>