почему div expertise__info-item не выравнивается по правой стороне?

Question

.expertise{
  padding: 140px 0 160px;
}

.expertise__title{
  margin-bottom: 90px;
}

.expertise__inner{
  display: flex;
  margin-bottom: 110px;
}

.expertise__info{
  width: 370px;
  margin-right: 30px;
  flex: none;
}

.expertise__text p{
  margin-bottom: 25px;

}

 
<section class="expertise">
<div class="container">
  <h2 class="title expertise__title">Our Expertise</h2>
  <div class="expertise__inner">
    <div class="expertise__info">
      <div class="expertise__info-item">
        BRANDING
        <span>90%</span>
      </div>
      <div class="expertise__info-item">
        DESIGN
        <span>80%</span>
      </div>
      <div class="expertise__info-item">
        DEVELOPMENT
        <span>85%</span>
      </div>

стрелочкой указано куда должен встать блок

Answer 1

С чего ты взял что в CSS что-то по умолчанию должно выравниваться по правой стороне ? Судя по твоему недокоду, не должно

.expertise {
  padding: 140px 0 160px;
}

.expertise__title {
  margin-bottom: 90px;
}

.expertise__inner {
  display: flex;
  margin-bottom: 110px;
}

.expertise__info {
  width: 370px;
  margin-right: 30px;
  flex: none;
}

.expertise__text p {
  margin-bottom: 25px;
}

<section class="expertise">
  <div class="container">
    <h2 class="title expertise__title">Our Expertise</h2>
    <div class="expertise__inner">
      <div class="expertise__info">
        <div class="expertise__info-item">
          BRANDING
          <span>90%</span>
        </div>
        <div class="expertise__info-item">
          DESIGN
          <span>80%</span>
        </div>
        <div class="expertise__info-item">
          DEVELOPMENT
          <span>85%</span>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

А что? нормальный код. Можно задать выравнивание вправо, внешний блок поставить display: inline-block, внутреннему установить минимальную ширину и установить непереносимые пробелы.

Убрал из кода отступы. На результат не влияют, зато тут отображается без прокрутки.

.expertise__inner{
  display: inline-block;
}

.expertise__info{
  min-width: 100px;
  margin-right: 30px;
  text-align: right;
  white-space: nowrap;
}

.expertise__text p{
  margin-bottom: 25px;
}

 
<section class="expertise">
<div class="container">
  <h2 class="title expertise__title">Our Expertise</h2>
  <div class="expertise__inner">
    <div class="expertise__info">
      <div class="expertise__info-item">
        BRANDING
        <span>90%</span>
      </div>
      <div class="expertise__info-item">
        DESIGN
        <span>80%</span>
      </div>
      <div class="expertise__info-item">
        DEVELOPMENT
        <span>85%</span>
      </div>
    </div>
  </div>
   </div>

БЛОГ НА HUSL

почему div expertise__info-item не выравнивается по правой стороне?

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