How to align 7 elements on the same line?

Question

I’m developing this site in bootstrap http://raissafigueiredo.com.br/masterclinic/

However, downstairs in the specials section, I have 7 elements in the same line. I had to use a "technical gambiarra" to align them, because I did not find a specific class that composes the 7 in the same line. In the desktop version everything is fine, but in the mobile version the elements are aligned to the left and disorganized.

Follow my code below:

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

I edited the percentage so that the elements behave on the same line without breaking.

#home-especialiadade .col-sm-2 {
    width: 14.2%;
}

Answer 1

There is a simple way to do this with the function calc of css.

.minhas-colunas{
    width: calc(100% / 7);
}

To ensure that padding do not interfere in the calculation, I usually use box-sizing:border-box, which will calculate the size of the element literally, including the size of the border and padding.

.minhas-colunas {
    width: calc(100%/7);
    padding:5px;
    box-sizing:border-box;/** o padding não vai atrapalhar **/
  }

And finally, use the famous float:left:

.minhas-colunas{  
  width: calc(100%/7);
  background-color: green;
  box-sizing:border-box;
  float:left;
  display:block;
  border:1px solid black;
}

.pai{
 width:500px;
 background:blue;
 padding:10px
}

.pai:after{
  clear:both;
  content: ' ';
  display:block;
}

<div class="pai">
    <div class="minhas-colunas">
    1
    </div>
    <div class="minhas-colunas">
    2
    </div>
    <div class="minhas-colunas">
    3
    </div>
    <div class="minhas-colunas">
    4
    </div>
    <div class="minhas-colunas">
    5
    </div>
    <div class="minhas-colunas">
    6
    </div>
    <div class="minhas-colunas">
    7
    </div>
  <div class="minhas-colunas">
    1
    </div>
    <div class="minhas-colunas">
    2
    </div>
    <div class="minhas-colunas">
    3
    </div>
    <div class="minhas-colunas">
    4
    </div>
    <div class="minhas-colunas">
    5
    </div>
    <div class="minhas-colunas">
    6
    </div>
    <div class="minhas-colunas">
    7
    </div>
</div>

Answer 2

You can add the class col-xs-12, but it has to correct because its class #home-especialiadade .col-sm-2 this over her.

Adiona media query for your class #home-especialdiade .col-sm-2:

@media (min-width: 768px){
    #home-especialiadade .col-sm-2 {
        width: 14.2%;
    }
}

To solve your 7 column problem you can see this answer on ONLY ENGLISHMAN

Answer 3

Another method with no need to specify any width (except for mobile configuration if desired) would be to use ul li with display:table-cell.

ul {
    display:table;
    width:100%;
}
ul li {
    display:table-cell
}

Look at my example: http://jsfiddle.net/4r8mwLap/1/

Note: In the example the code is functional with the option of Responsive.

Edited

If you wish to continue using div instead of ul li, the process is the same, just use the same properties in divs, see the updated example: http://jsfiddle.net/4r8mwLap/2/

The bottom block is with div structure using the same properties as ul li.

Answer 4

Can use flexbox ^support:

section {
  display: flex;
  justify-content: space-between
}

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</section>