Почему не работает justify-content:space-around?

Question

[Pr0grammer]

<div class="main">
          <div class="container">
              <div class="main__inner">
              <div class="main__photo">
                <img class="main__img" src="images/Main/White-levis.png" alt="">                  
              </div>
              <div class="main__content">
                  <h1 class="main__title">Cowhide Standard Crew</h1>
                  <div>White coloured, short-sleeved, printed T-shirt for men by Levi's. This crew-neck T-shirt is made of organic cotton and comes in a regular fit. </div>
                  
                </div>
          </div>
          </div>
      </div>

.main{
    height: 446px;
    background-image: url(images/Background.jpg);
}
.main__inner{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.main__photo{
    display: flex;
}
.main__img{
    align-self: center;
}
.container{
    max-width: 1024px;
    margin:0 auto;
}

В классе main__inner не работает justify-content:space-around.Почему????????????

Comments

[Ankhena]

lDNFW,

Мне надо верстать такой блок.

Очень сомнительно, что в этом макете есть применение для space-around
Вероятнее, ограничение для ширины блока с картинкой и отступ.

а тут:

.main__photo{
    display: flex;
}
.main__img{
    align-self: center;
}

зачем задавать свойства разным селекторам, если ребенок один?

.main__photo{
  display: flex;
  align-items: center;
}

Answer 1

[Воващ]

justify-content: space-around; Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют полноразмерное пространство

Comments

[Pr0grammer]

А разве в вы что то меняли?

[Воващ]

lDNFW, проблема не в justify-content: space-around а в размере (ширине) img
Выше наглядно видно, что в main__inner работает justify-content: space-around

[Pr0grammer]

Воващ, А как решить проблему? Мне надо верстать такой блок.

[Воващ]

lDNFW, я бы использовал bootstrap
где блок с картинкой col-4, а блок с текстом col-8

вероятно в макете есть 12 колонок

[Pr0grammer]

Воващ, Я тоже использовал bootstrap,но мне надо верстать на flexbox

[Pr0grammer]

Воващ, Можно еще 1 вопрос?