Como faço para tirar o espaço entre a imagem e a div ?

Estou com uma duvida, quando tento repetir os conhecimentos da aula para usar o inline-block em uma div, funciona tudo perfeito, mas quando eu coloco um background-color na div eu percebo que fica uma divisão entre a div e a imagem e nao consigo fazer isso sumir. ja tentei colocar o margin e o padding para 0 mas não muda em nada. estou colocando meu html e o css. a aparte que estou com problema é na div no final do html e o css que esta relacionado tb esta no final do codigo css.

HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <img id="banner" src="banner.jpg">
        <div class="principal">
            <h1>Sobre a Barbearia Alura</h1>

            <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

            <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
        </div>

        <div class="beneficios">
            <h2>Benefícios</h2>
            <div class="conteudo">
                <p>
                    Atendimento aos Clientes
                </p>
            </div>



            <img src="beneficios.jpg" class="imagembeneficios">
        </div>
    </body>
</html>

CSS

body {

}

#banner {
    width:100%;
}

.principal{
    background: #CCCCCC;
    padding: 30px;
}

h1 {
    text-align: center
}

p {
    text-align: center;
}

#missao {
    font-size: 20px
}

em strong {
    color: #FF0000;
}

.itens {
    font-style: italic
}

.beneficios {
    background: #FFFFFF;
    padding: 20px;
}


.conteudo {
    width: 40%;
    height: 430px;
    background-color: gray;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}

.imagembeneficios {
    width: 50%;

Olá, Leonardo! Tudo bem?

Ao usar o inline-block e a imagem, lado a lado, o seu navegador está colocando um espaço em branco entre eles, correto?

Esse espaço em branco é, na realidade, os espaços do seu código HTML. Nessa situação específica, o navegador lê até mesmo espaços do seu código, isso inclui quebras de linha e indentação. Há algumas maneiras de resolver isso:

A primeira é você remover completamente os espaços entre a imagem e a div, ficando algo como:

<div class="conteudo">
    <p>
        Atendimento aos Clientes
    </p>
</div><img src="beneficios.jpg" class="imagembeneficios">

Outra maneira, é adicionar uma margem negativa à imagem, de -4px.

.imagembeneficios {
    width: 50%;
    margin-left: -4px;
}

Você também pode definir o tamanho da fonte da classe beneficios como zero, e definir nas classes filhas que usam texto (como a conteudo) o valor desejado (padrão para parágrafos é 16px).

Qualquer uma dessas soluções deve funcionar.

Qualquer dúvida estamos aqui!