It’s breaking because the value of padding is always added to the width of the element, so how you are using padding of 20px for each side your element ends up with 33% + 40px wide in total.
To fix this there is a property called box-Sizing, placing the value of border-box (box-sizing: border-box) vc prevents the padding value from being added to the full width of the element. Here you can read more about this property Why use/not use * box-Sizing?
Besides when you wear "display:inline-block" a lateral spacing is created between one element and another, because it would be something similar to the natural space that exists between a word and another, because when rendering the page the document will configure each div as if it were a word and will give a lateral space between a div and another. You can read about this bug here. That’s why I used float:left to take that space How to remove "whitespace-only text Node" that appear in HTML from the DOM
See how it looks in the example below:
.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
If you want, it is also possible to divide into 3 placing display:flex in the container Dad, this will make the divs align horizontally to each other and not vertically to each other (one by "line").
Also to have a more accurate division of each column you can use calc in the width thus: width: calc(100% / 3)
Expand the code below to better see the result.
.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>