Olá, comecei agora a mexer com HTML5/CSS e estou fazendo alguns testes e me deparei com uma dificuldade. Estou tentando alinhar quatro listas ao lado de uma imagem, porém ela não fica alinhada.
O exemplo que estou me baseando é esse: https://prnt.sc/xz2029
Segue abaixo meu código:
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>