html – Last elements of a class executing incorrectly

Question:

See this screenshot and you will understand what is happening: http://imgur.com/a/B0zkV

I've already checked the code several times and apparently I didn't find any errors, here's the html and css part of this class:

HTML:

main .main-pagina .services-principal {display: table;background: #eee;margin-bottom: 100px}
main .main-pagina .services-principal .services {float: left;width: 49%;background: transparent;box-sizing: border-box;background: #eee;margin: 0;padding: 5px}
main .main-pagina .services-principal .services .services-bloco {padding: 20px 5px;display: table}
main .main-pagina .services-principal .services .services-bloco img {float: left;}
main .main-pagina .services-principal .services .services-bloco h3 {float: left;font-family: 'Raleway', sans-serif;font-size: 16px;color: #111;padding-left: 15px;margin-top: 10px;box-sizing: border-box;}
main .main-pagina .services-principal .services .services-bloco span {width: 100%;height: 100px;overflow: hidden;display: block;float: left;font-family: 'Raleway', sans-serif;font-size: 14px;color: #454545;padding-left: 48px;box-sizing: border-box;margin-top: 10px;line-height: 22px}
<div class="services-principal" id="servicos">
				<div class="services">

					<div class="services-bloco">
						<img src="images/icones/profissional.png">
						<h3>Serviços</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting</span>
					</div><!-- fim services-bloco -->

					<div class="services-bloco">
						<img src="images/icones/suporte.png">
						<h3>Suporte 24 Hrs</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting industry of the</span>
					</div><!-- fim services-bloco -->

				</div><!-- fim services -->

				<div class="services">

					<div class="services-bloco">
						<img src="images/icones/marketing.png">
						<h3>Marketing</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting</span>
					</div><!-- fim services-bloco -->

					<div class="services-bloco">
						<img src="images/icones/inovacao.png">
						<h3>Inovação</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry typesetting</span>
					</div><!-- fim services-bloco -->

				</div><!-- fim services -->

				<div class="services">

					<div class="services-bloco">
						<img src="images/icones/video.png">
						<h3>Edição de vídeos</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry</span>
					</div><!-- fim services-bloco -->

					<div class="services-bloco">
						<img src="images/icones/recuperacao.png">
						<h3>Recuperação de dados</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy</span>
					</div><!-- fim services-bloco -->

				</div><!-- fim services -->

				</div><!-- fim services-principal -->

Answer:

I made a change to your code by adding the .services-bloco to your CSS like this:

 .services-bloco{ width: 40%; float: left;}

Test and verify the code below:

.main-pagina .services-principal {display: table; background: #eee;margin-bottom: 100px}
.main-pagina .services-principal .services {float: left;width: 49%;background: transparent;box-sizing: border-box;background: #eee;margin: 0;padding: 5px}
.services-bloco {padding: 20px 5px;display: table}
.services-bloco img {float: left;}
.services-bloco h3 {float: left;font-family: 'Raleway', sans-serif;font-size: 16px;color: #111;padding-left: 15px;margin-top: 10px;box-sizing: border-box;}
.services-bloco span {width: 100%;height: 100px;overflow: hidden;display: block;float: left;font-family: 'Raleway', sans-serif;font-size: 14px;color: #454545;padding-left: 48px;box-sizing: border-box;margin-top: 10px;line-height: 22px}
.services-bloco{ width: 40%; float: left;}
<div class="services-principal" id="servicos">
   <div class="services">
      <div class="services-bloco">
         <img src="images/icones/profissional.png">
         <h3>Serviços</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting</span>
      </div>
      <!-- fim services-bloco -->
      <div class="services-bloco">
         <img src="images/icones/suporte.png">
         <h3>Suporte 24 Hrs</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting industry of the</span>
      </div>
      <!-- fim services-bloco -->
   </div>
   <!-- fim services -->
   <div class="services">
      <div class="services-bloco">
         <img src="images/icones/marketing.png">
         <h3>Marketing</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting</span>
      </div>
      <!-- fim services-bloco -->
      <div class="services-bloco">
         <img src="images/icones/inovacao.png">
         <h3>Inovação</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry typesetting</span>
      </div>
      <!-- fim services-bloco -->
   </div>
   <!-- fim services -->
   <div class="services">
      <div class="services-bloco">
         <img src="images/icones/video.png">
         <h3>Edição de vídeos</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry</span>
      </div>
      <!-- fim services-bloco -->
      <div class="services-bloco">
         <img src="images/icones/recuperacao.png">
         <h3>Recuperação de dados</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy</span>
      </div>
      <!-- fim services-bloco -->
   </div>
   <!-- fim services -->
</div>
<!-- fim services-principal -->
Scroll to Top