2

Pergunta bem específica! Segue a linha de código.

.container {width: 80%;margin: 0 auto;}

#servicos {width: 100%}
#servicos .services {width: 33%;padding: 20px;display: inline-block;}
#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>

1 Resposta 1

6

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 divs 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .