【HTML/CSS】配置レイアウトのコード書き方がいまいちうまくい行きません

Question

前提・実現したいこと

下部画像にて
各アイコンと項目を黄色の落書きのような配置レイアウトを行いたいと考えています。
余白を作りすぎず、等間隔で配置したいです。

これが現在のになります。

該当のソースコード

   <div class= "skill">
      <a name="skill"></a>
      <h2>SKILL</h2>
      <p>未経験でありますが、頑張ります。</p>
    </div>
      
        <!--<div class = "skill1">-->
            <div class ="html">
              <img src="img/programming0.png" width="40" height="40" alt="html">
              HTML5/CSS
              <P>わわわわわわわわあわわわあわわわわあわｗ</P>
            </div>
            <div class="php">
                <img src="img/programming1.png" width="40" height="40" alt="php">
              PHP
              <P>わわわわわわわわあわわわあわわわわあわｗ</P>
            </div>
            <div class="wordpress">
                <img src="img/wordpress.png" width="40" height="40" alt="wordpress">
              WordPress
              <P>わわわわわわわわあわわわあわわわわあわｗ</P>
            </div>
        <!--</div>-->

        <!--<div class="skill2">-->
            <div class="photoshop">
                <img src="img/ps.png" width="40" height="40" alt="photoshop">
              PhotoShop
              <P>わわわわわわわわあわわわあわわわわあわｗ</P>
            </div>
            <div class="Illustrator">
                <img src="img/ai.png" width="40" height="40" alt="illustrator">
              Illustrator
              <P>わわわわわわわわあわわわあわわわわあわｗ</P>
            </div>``` 
CSSですが、いろいろ配置換えのコードは書いてみましたが、反応なかったので、ほぼ無記入状態にしております。
```CSS
skill{
  margin-left: auto;
  margin-right: auto;
}
.html{
  
}
.php{
}
.wordpress{
  
}

何卒、宜しくお願いいたします。

Answer 1

flexbox

<div class = "skill1">,<div class = "skill2">と分けずに ５つ要素を包んでflexboxを使用してみてはいかがでしょうか？

Answer 2

displayをinline-blockへ

---

流石にあれなのでコード書いときます。

<div id=skill>
  <div id=b1>
    aiueo1
  </div>
  <div id=b2>
    aiueo2
  </div>
  <div id=b3>
    aiueo3
  </div>
  <div id=b4>
    aiueo4
  </div>
  <div id=b5>
    aiueo5
  </div>
</div>

#b1,#b2,#b3,#b4,#b5{
  width: 30vw;
  max-width: 300px;
  display: inline-block
}
#skill {
  margin: 0 auto;
  max-width: 61vw
}