ある範囲の中で綺麗に要素を等分したいのですが左側に余白ができてしまいます。

Question

前提・実現したいこと

最近HTML勉強し始めた初心者です。

ナビゲーションバー？のようなものを作りたいのですが、思うようにいかずに悩んでます。
幅と高さを指定して、その中で5等分したいです。

5等分したい要素の左側に余白ができてしまう理由が知りたいです。

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

.header-nav-wrapper a の左側
に40pxの余白ができてしまいます。

エラーメッセージ

該当のソースコード

        <nav class="header-nav">
          <ul class="header-nav-wrapper">
            <a href="">
              <li class="title"></li>
              <li class="title-en"></li>
            </a>
            <a href="">
              <li class="title"></li>
              <li class="title-en"></li>
            </a>
            <a href="">
              <li class="title"></li>
              <li class="title-en"></li>
            </a>
            <a href="">
              <li class="title"></li>
              <li class="title-en"></li>
            </a>
            <a href="">
              <li class="title"></li>
              <li class="title-en"></li>
            </a>
          </ul>
        </nav>

.header-nav {
  bottom: 0px;
  border: solid 1px #6CC6C4;
  height: 70px;
  width: 919px;
  margin: 0 auto;
}
.header-nav-wrapper {
  display: flex;
  text-align: center;
  border:solid 1px #000;
  /* padding-left: ; */
}
.header-nav-wrapper li {
  list-style: none;
}
.header-nav-wrapper a {
  display: inline-block;
  width: 20%;
  text-decoration: none;
  margin: 0 auto;
  border:solid 1px red;
}

試したこと

padding-leftを０にしたら、見た目上は希望通りになるのはわかりました。

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

ここにより詳細な情報を記載してください。

Answer 1

UL要素のブラウザの規定のスタイルが padding-inline-start: 40px;(≒padding-left: 40px;) ですので、そうなります。

各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge | コリス

既定のスタイルはブラウザで異なる場合もありますので、同じCSSでもブラウザによってレイアウトが異なる場合があります。
また、今回のように既定のスタイルを無視した独自のデザインにしたい場合も邪魔になる場合があります。
それを防ぐために リセットCSS を使う場合が多いです。

2020年、モダンブラウザに適したCSSリセットのまとめ | コリス

Comments

[baggio]

早速のご回答ありがとうございます。

やりたいことに対してやったことは間違ってないが、一々打ち消すより、はじめからリセットcssを使う方が一般的という認識でよろしいのでしょうか。

リセットcssの存在自体は知っていましたが(教則本やネットの情報などで)、今回のことでリセットcssを使う意味をなんとなくですがようやくわかった気がします。