Estou desenvolvendo este site em bootstrap http://raissafigueiredo.com.br/masterclinic/
Porém, lá embaixo na parte de especialidades, tenho 7 elementos na mesma linha. Tive que usar uma "gambiarra técnica" para alinha-los, pois não encontrei uma classe especifica que comporte os 7 na mesma linha. Na versão desktop fica tudo bem, porém na versão mobile os elementos ficam alinhados a esquerda e desorganizados.
Segue abaixo meu código:
<div class="feature-box">
<div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
<div class="feature-box-heading">
<em>
<img width="59" height="55" alt="" src="img/icon-botox.png">
</em>
<h4>Botox e DTM</h4>
</div>
</div>
<div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
<div class="feature-box-heading">
<em>
<img width="41" height="55" alt="" src="img/icon-clareamento.png">
</em>
<h4>Clareamento</h4>
</div>
</div>
<div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
<div class="feature-box-heading">
<em>
<img width="50" height="55" alt="" src="img/icon-implantes.png">
</em>
<h4>
Implantes
</h4>
</div>
</div>
<div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
<div class="feature-box-heading">
<em>
<img width="50" height="55" alt="" src="img/icon-estetica.png">
</em>
<h4>
Estética
</h4>
</div>
</div>
<div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
<div class="feature-box-heading">
<em>
<img width="50" height="55" alt="" src="img/icon-odontologia.png">
</em>
<h4>
Odontologia
</h4>
</div>
</div>
<div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
<div class="feature-box-heading">
<em>
<img width="50" height="55" alt="" src="img/icon-canal.png">
</em>
<h4>
Tratamento de Canal e Ronco
</h4>
</div>
</div>
<div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
<div class="feature-box-heading">
<em>
<img width="38" height="55" alt="" src="img/icon-proteses.png">
</em>
<h4>
Próteses
</h4>
</div>
</div>
</div>
Editei a porcentagem para que os elementos se comportem na mesma linha sem quebrar.
#home-especialiadade .col-sm-2 {
width: 14.2%;
}