display: flex сжимает всю секцию

Question

У меня такой вопрос, не подскажете почему display: flex сжимает всю секцию? А мне фактически нужно, чтобы мой блок с иконками был justify-content: space-between, но flex почему то это всё сжимает.
Заранее спасибо за ответ.

.skills {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  margin: 40px 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.skills__content {
  max-width: 956px;
  padding: 0px 10px;
}

.skills__title {
  font-size: 34px;
  line-height: 42px;
}

.skills__mixing {
  font-size: 18px;
  line-height: 22px;
}

.skills__programs-colums {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.skills .img {
  width: 89px;
  height: 88px;
}

<section id="skills" class="page__skills skills">
         <div class="skills__content _container">
            <div class="skills__body">
               <div class="skills__description">
                  <div class="skills__title">
                     <p>Skills</p>
                  </div>
                  <div class="skills__mixing">
                     <p>I work in such programs as:</p>
                  </div>
               </div>
               <div class="skills__programs-colums">
                  <div class="skills__photoshop">
                     <div class="img">
                        <img src="img/Photoshop_icon.png" alt="">
                     </div>
                     <div class="title">
                        <p>Adobe <br>
                           Photoshop</p>
                     </div>
                     <div class="stars">
                        <div class="first__star">
                           <img src="img/Star.png" alt="">
                        </div>
                        <div class="second__star">
                           <img src="img/Star.png" alt="">
                        </div>
                        <div class="third__star">
                           <img src="img/Star.png" alt="">
                        </div>
                        <div class="fourth__star">
                           <img src="img/Star.png" alt="">
                        </div>
                        <div class="fifth__star">
                           <img src="img/Star-1.png" alt="">
                        </div>
                     </div>
                  </div>
                  <div class="skills__illustrator">
                     <div class="img">
                        <img src="img/Illustrator_icon.png" alt="">
                     </div>
                     <div class="title">
                        <p>Adobe <br>
                           Illustrator</p>
                     </div>
                     <div class="stars"></div>
                  </div>
                  <div class="skills__after-effects">
                     <div class="img">
                        <img src="img/After_Effects_icon.png" alt="">
                     </div>
                     <div class="title">
                        <p>Adobe <br>
                           After Effects</p>
                     </div>
                     <div class="stars"></div>
                  </div>
                  <div class="skills__figma">
                     <div class="img">
                        <img src="img/figma_icon.png" alt="">
                     </div>
                     <div class="title">
                        <p>Figma</p>
                     </div>
                     <div class="stars"></div>
                  </div>
               </div>
            </div>
         </div>
      </section>

Answer 1

Код сильно перегружен и показан не весь. Активно используете width для div, что делать совершенно не нужно. Масса лишних обёрток.

В общем случае Вам достаточно div, в котором лежат четыре img. Хотя, по-хорошему, эти иконки следует положить в фон, потому что они не являются контентом.

HTML:

<div class="skills__programs-colums">
  <img src="#" alt="Фотошоп" />
  
  <img src="#" alt="Иллюстратор" />
  
  <img src="#" alt="Автоэффект" />
  
  <img src="#" alt="Фигма" />
</div>

CSS:

.skills__programs-colums { 
  display: flex; 
  justify-content: space-between;
}

БЛОГ НА HUSL

display: flex сжимает всю секцию

Ответы (1 шт):