inner（コンテナ）幅は可変で、左右の余白のみpxで指定するには

Question

レイアウトを中心に配置するためのinner(container)を幅は可変で、左右にのみ15pxずつの余白を設定したく、現在以下のような記述でやっていますが、footer-navクラスにCSSで背景色を指定した時に、左右に白い余白が入ってしまいます…。

    <div class="footer-nav">
      <div class="container">
        <ul>
        <li><a href="#">プライバシーポリシー</a></li>
        <li><a href="#">お問い合わせ</a></li>
        <li><a href="#">特定商取引法に基づく表記</a></li>
        <li><a href="#">サイトマップ</a></li>
        </ul>
      </div>
    </div>

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

.footer-nav {
  background-color: #C6C6C6;
  margin-top: 60px;
  text-align: center;
  width: 100%;
}

footer-navの上にも他のコンテンツがあり、背景にCSSで画像を入れている部分も同じく左右に白い余白が入ってしまいます。（背景は画面いっぱいにしたいのですが…。）
inner(container)の左右の余白を指定するのにはpadding: 0 15px;は不適切なのでしょうか？

かなり基本の部分かと思いますが、毎回つまづいてしまうのでこちらで質問させていただきます。よろしくお願いいたします。

Answer 1

回答はkei344様のもので正解だと思います

では、なぜ？そうなるのか？を理解しておいた方がいいので私からの助言としては
リセットCSSと言うモノを理解する必要すれば解決できるかと思います

参考サイト
https://web-camp.io/magazine/archives/30817

Comments

[yamahaggy]

ご回答ありがとうございました！
ベストアンサーはKei344様のご回答に付けさせていただきましたが、AMK様のご回答はまさに私の知りたかったところで、とてもすっきり理解することができました！本当にありがとうございました◎

Answer 2

どの要素が原因か、デベロッパーツールで確認してみてください。

body {
  margin: 0; /* 予想 */
}

【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

---

また、max-width: 100%; は max-width: max-content; では？

【max-width - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/max-width#Values

Comments

[yamahaggy]

前回に続きご回答ありがとうございます！

予想していただいていた記述で解決いたしました。
デベロッパーツールをまだ使いこなせて無いので、勉強させていただきます。

max-width: 100%; については特に理由は無いのですが、支持してるサイトの方を参考にしています。
参考URLの記事を拝読いたしましたが、max-width: max-content;との違いがいまいち分かりませんでした（汗）。もう少し自分で追って勉強したいと思います。
ご丁寧なご回答ありがとうございました。