【HTML・CSS】ul要素がli要素分の幅を取ってくれない

Question

前提・実現したいこと

ul要素がli要素分取ってほしい

発生している問題・エラーメッセージ

li要素がはみ出てしまっている

該当のソースコード

<ul>
  <li>
    <i class="fab fa-facebook-square facebook"></i>
  </li>
  <li>
    <i class="fab fa-twitter-square twitter"></i>
  </li>
  <li>
    <i class="fab fa-instagram-square instagram"></i>
  </li>
</ul>

ul {
  display: flex;
　list-style: none;
}
.facebook,
.twitter,
.instagram {
  color: #555;
  font-size: 5.4vw;
}

試したこと

min-width: 0;
display: inline-block;

したが変わらず。

補足情報（FW/ツールのバージョンなど）

アイコンはFontAwesomeを使用しています。

Comments

[m.ts10806]

コピペで再現可能なコードをご提示ください。画像だけで判断するのはどんな熟練者でも無理です。

[is02]

すみません、載せました。

[hatena19]

呈示のコードだけでは症状が再現できませんでした。他の部分か影響していると思います。
検証ツールでなにが設定されているか確認されてみては。

[is02]

はい、無事直りました。お手数おかけいたしました。

Answer 1

親要素にfont-size: 0;したら出来ました

Comments

[m.ts10806]

そもそもulってfont-size持ってましたっけ