横並びのliを画面サイズを変えても等間隔でキレイに配置したい。

Question

liの、Home,会社概要、自社物件案内、お問い合わせ、採用情報を
画面サイズが変化してもキレイに等間隔で揃えたいです。
PC、スマホ毎の画像サイズでないく、PCのみでの、画像サイズが変化する場合です。

コード
<div class="header-container">
        <img src="Pmain.JPG" alt="画像">
        <h2><span class="far fa-building fa-fw org"></span>〇〇〇</h2>
        <div class="header-list">
          <ul>
            <li>Home</li>
            <li>会社概要</li>
            <li>自社物件案内</li>
            <li>お問い合わせ</li>
            <li>採用情報</li>
          </ul>
        </div>
</div>

コード
.header-container {
  position: relative;
}

.header-container img {
  height: auto;
  background-size: cover;
  width: 100%;
}

.org{
  opacity: 0.5;
}

.container {
  margin: 0 auto;
  width: 100%;
}
header h2 {
  font-size: 30px;
  border: 3px inset gray;
  display: inline-block;
  padding: 3px;
  background-color: rgba(249, 237, 228, 0.5);
  margin: 10px 5px;
  width: 150px;
  letter-spacing: 3px;
  position: absolute;
  top: 0;
  left: 0;
}

.container span {
  padding: 0px 5px;
  height: 26.25px;
  margin: 10px auto;

}

.header-list {
  background-color: rgba(45,52,60,0.7);
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;

}

.header-list ul {
  position: absolute;
  top: 0;
  margin: 0 auto;
  width: 100%;
  display: table-cell;
}

.header-list li {
  float: left;
  color: white;
  cursor: pointer;
  width: 20%;
  padding-top: 13px;
  text-align: center;
}

.header-list li:hover {
  opacity: 0.5;

}

Answer 1

vwか%でwidthをご指定ください。

MDN

もしmargin等を考慮するならcalcをご利用ください。

MDN

Comments

[RT2]

ありがとうございます(^^♪