HTML&CSS flex関係

Question

HTML&CSS 初心者で今模写コーディングをしているんですが

<header>
      <div class="container">
        <img src="img/main-logo.png" alt="main-logo" class="main-logo">
        <div class="main-info">
          <p class="info-title">"地域に根付いた歯科医院"デンタルクリニック</p>
          <p class="phone">03-0000-0000</p>
          <p class="open-time">予約受付時間 10:00~19:30 <span class="text-red">日祝 休診</span></p>
        </div>
      </div>
      <div class="container">
        <ul class="nav">
          <li><a href="#">トップページ<br>HOME</a></li>
          <li><a href="#">医院紹介<br>CLINIC</a></li>
          <li><a href="#">診療案内<br>SERVICE</a></li>
          <li><a href="#">院長・スタッフ紹介<br>STAFF</a></li>
          <li><a href="#">アクセス<br>ACCESS</a></li>
        </ul>
      </div>

.nav{
    width:100%;
    display:flex;
    list-style-type: none;
  }
  .nav a{
    text-decoration-line: none;
  }
  .nav li{
    background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
    flex:auto;
    background-color:#F6F6F6;
    padding: 20px;
  }

ulタグにdisplay:flex, liタグにはflex:autoを適用しているのですが中の要素が右にずれてはみ出してしまいます。

どのように修正すればいいのでしょうか、よろしくお願いいたします

Answer 1

paddingを消すだけです。

.nav{
  width:100%;
  display:flex;
  list-style-type: none;
  padding: 0;  /* 追記 */
}

Comments

[tokumon10]

解決しました。ありがとうございます！
もう１つお聞きしたいんですが、CSSの最初でBody全体にPaddingを０にしてるんですがここで再度設定しなければいけない理由はありますか？

[soliste16]

ブラウザには元からある程度cssが適用されています。今回の場合はulにpadding-inline-start: 40px;が設定されています。これのせいでbodyに設定したcssが上書きされています。ですのでそれをさらに上書きしなければいけないんです。デベロッパーツールでcssの項目を見るとブラウザで設定されているcssであるuser agent stylesheetというのがあると思うので見てみてください。

[退会済みユーザー]

@tokumon10

リセットCSS を調べるとわかりますよ

[tokumon10]

とても分かりやすく説明いただきありがとうございます！