padding-inline-start: 40px 問題について

現在HTML、CSSを勉強し始めてまだ間もないのですが、小さい壁にぶつかっては、調べて改善している途中です。

当初はメモしていましたが、メモするよりもブログ内で忘備録として書きためたほうがわかりやすいと思いましたので記していきます。

padding-inline-start: 40px 問題

今回は、「padding-inline-start: 40px 問題」について、私なりの解決方法を忘備録として記載していきます。

この問題は、フッターでpadding-leftを0としても、ブラウザの初期設定で40px消せないということです。

▼コード（styles.css）

footer ul{
    margin: 0;
    list-style-type: none;
    padding-left: 0;
}

footer ul{

margin: 0;

list-style-type: none;

padding-left: 0;

}

原因はよくわからないのですが、ブラウザの元々の設定が反映されてしまし、中々外す方法がみあたらないのです。そこで、他のサイトを調べると、設定を初期化などをオススメしてますが、私にはちょっと怖い感じがしたのと、再現性があやしくおもったので、以下の方法をオススメ致します。

対応方法

概略：inline-startを0に設定してあげる。

inset-inline-start: 0px;

①index.html　内で、関連ulをclassで識別化する。（仮でtoolsとします。）

footerのul全体を含んで識別化してあげる。

  <div class="tools">
    <ul>
　　　　　　　～
    </ul>
  </div>

<ul>

　　　　　　　～

</ul>

</div>

②styles.css　内で、読み込んで設定する。

識別化したものをinset-inline-startで0に設定してあげる。

.tools{
    inset-inline-start: 0px;
  }

.tools{

inset-inline-start: 0px;

}

これだけで、消えました。

もっと他に簡単な方法がありましたらご教授お願い致します。