Divs has width with 33% because they do not line up?

It is breaking because the value of padding is always added to the width of the element, so since you are using padding of 20px for each side your element ends up with 33% + 40px width in total.

To correct this there is a property called box-sizing , putting the value of border-box (box-sizing: border-box) vc prevents the padding value from being added in the total width of the element. Here you can read more about this property Why use / not use * box-sizing?

In addition, when you use "display: inline-block" , a side spacing between one element and another is created, since it would look something like the natural space between words. when rendering the page the document will set 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. So I used float:left to get that space How to remove the whitespace-only text node that appears in the HTML

See 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>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</p></div><divclass="services">
        <img src="https://picsum.photos/300/200/?random"><p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</p></div><divclass="services">
        <img src="https://picsum.photos/300/200/?random"><p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</p></div></div></div>

EDIT

Ifyouwant,youcanalsosplit3byputtingdisplay:flexinthecontainerparent,thiswillmake%sof%salignhorizontallysidebysideandnotverticallyoneontopoftheother(oneper"line").

In addition to having a more precise division of each column you can use div in calc like this: width

Expand the code below to see the result better.

.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>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</p></div><divclass="services">
        <img src="https://picsum.photos/300/200/?random"><p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</p></div><divclass="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>