Está quebrando porque o valor do padding
sempre é somado a largura do elemento, então como vc está usando padding
de 20px para cada lado o seu elemento acaba ficando com 33% + 40px
de largura no total.
Para corrigir isso existe uma propriedade chamada box-sizing, colocando o valor de border-box (box-sizing: border-box)
vc evita que o valor da padding seja somado na largura total do elemento. Aqui vc pode ler mais sobre essa propriedade Por que usar/não usar * box-sizing?
Além disso quando vc usa "display:inline-block" é criado um espaçamento lateral entre um elemento e outro, pois seria algo parecido com o espaço natura que existe entre uma palavra e outro, pois ao renderizar a página o documento vai configurar cada div
como se fosse uma palavra e vai dar um espaço lateral entre uma div
e outra. Vc pode ler sobre esse bug aqui. Por isso usei float:left
para tirar esse espaço Como remover do DOM os "whitespace-only text node" que aparecem no HTML
Veja como fica no exemplo abaixo:
.container {width: 80%;margin: 0 auto;}
#servicos {width: 100%}
#servicos .services {width: 33%;padding: 20px;float: left; box-sizing: border-box;}
#servicos .services img {width: 100%;}
<div class="container">
<div id="servicos">
<h2>Serviços</h2>
<div class="services">
<img src="https://picsum.photos/300/200/?random">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div class="services">
<img src="https://picsum.photos/300/200/?random">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div class="services">
<img src="https://picsum.photos/300/200/?random">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>
EDIT
Caso queira, também é possível dividir em 3 colocando display:flex
no container pai, isso vai fazer as div
s se alinharem horizontalmente uma ao lado da outra e não verticalmente uma encima da outra (uma por "linha").
Além disso para ter uma divisão mais precisa de cada coluna vc pode usar calc
no width
dessa forma: width: calc(100% / 3)
Expanda o código abaixo para ver melhor o resultado.
.container {width: 80%;margin: 0 auto;}
#servicos {
width: 100%;
display: flex;
}
#servicos .services {width: calc(100% / 3);padding: 20px; box-sizing: border-box;}
#servicos .services img {width: 100%;}
<div class="container">
<h2>Serviços</h2>
<div id="servicos">
<div class="services">
<img src="https://picsum.photos/300/200/?random">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div class="services">
<img src="https://picsum.photos/300/200/?random">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div class="services">
<img src="https://picsum.photos/300/200/?random">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>