Отображать значки в строках на мобильном устройстве

Question

Эти значки должны быть на мобильных телефонах в два ряда по три, однако они оказались в одном столбце. Как мне исправить эту проблему?

HTML

    <div class="skill-section">
        <div class="skill-box"><img src="html.svg" alt=""></div>
        <div class="skill-box"><img src="css.svg" alt=""></div>
        <div class="skill-box"><img src="js.svg" alt=""></div>
        <div class="skill-box"><img src="sass.svg" alt=""></div>
        <div class="skill-box"><img src="react.svg" alt=""></div>
        <div class="skill-box"><img src="python.svg" alt=""></div>
    </div>

CSS

.feature-box{
    display: inline-block;
    width: 33%;
    padding: 20px 30px;
    text-align: center;
    img{
        width: 150px;
        margin: 0 0 12px 0;
        line-height: 1;
    }
    p{
        font-size: 1.5rem;
    }
}

Media Query

/* Skills */
section .skill-section{
    display: inline-block;
    text-align: center;
    .skill-box{
        display: inline-block;
        width: 44%;
            img{
                width: 44%;
                padding: 10px;
            }
    }
}       

Answer 1

Попробуйте удалить section до .skill-section в вашем CSS. Может быть, это была ваша проблема?

Я добавил скрипку, высоту и задний план ... чтобы увидеть коробки умений. Это выглядит правильно, если это то, чего вы хотите достичь:

Или, возможно, показать еще несколько строк кода, для лучшей помощи / информации.

Answer 2

/* Skills */
#skills{
    margin: 0 auto;
    text-align: center;
    .feature-box{
        display: inline-block;
        width: 25%;
        img{
            width: 30px;
        }
    }

}