要素を中央にできない

デベロッパーツールで確認すると左端に余白ができます。

初めて質問させて頂きます。初心者ですがよろしくお願い致します。
chromeのデベロッパー・ツールの機能を使って携帯の表示の確認をしながら作業を進めておりますが、
class=container に {width: 960px; margin: 0 auto;} と指定すると
要素が画面の中央になると聞いたのでやってみましたが、左右対称に余白が出来ず
左端の方が余白が多いです。
左右均等に余白が入るように作りたいのですが、どのようにすればよいでしょうか。
どこまでコードをお知らせしていいのか分からないので、全部書かせて頂きます。

【htmlファイル】

<body class="container">
<!-- ここからヘッター -->
<header>
<ul id="juntar-header"> <!--ロゴとタイトルを横並びにする為-->

        <li>   <!-- 上の左端のロゴ -->
        <div id="logo-arriba">
        <a class="logo" href="">
        <img src="./../logo/logo1.GIF" alt="COMIDAJPC"></a>
        </div>
        </li>


        <li>  <!-- タイトルとメニュー -->
        <div id="titulo-color">  <!-- タイトルの枠 -->


                     <div id="juntar">
                     <h1 class="entucasa"> COMIDA JAPONESA EN TU CASA </h1>
                     <h1 class="JPC">"ComidaJPC</h1>
                     </div>

                     <p> ¡Aprende a cocinar con chica japonesa! </p>

        <nav id="menu-boton"><!--メニューボタンの枠-->
                 <ul id="home-menu">
                 <li> <a href="http://">HOME</a> </li>
                 <li> <a href="http://">YOUTUBE</a> </li>
                 <li> <a href="http://">CURSOS</a> </li>
                 <li> <a href="http://">RECETAS</a> </li>
                 <li> <a href="http://">POSTRE</a> </li>
                 <li> <a href="http://">CONTACTO</a> </li>
                 </ul>
        </nav> <!--メニューボタンの枠 ここまで-->
        </div><!--タイトルの枠ここまで-->
        </li>
</ul> <!--ロゴとタイトルを横並びにする ここまで-->
</header> <!--headerここまで-->


<main>

<article id="juntar-portada"> <!--portada と presentacion を横並びにする為-->

  <!--portada-1 写真-->
<section id="portada-1">
    <img src="./../imagen/portada/sushi.png" alt="sushi" >
    <img src="./../imagen/portada/ramen.png" alt="ramen" >
    <img src="./../imagen/portada/edamame.png" alt="edamame" >
    <img src="./../imagen/portada/bento.png" alt="bento" >
    <img src="./../imagen/portada/tempura.png" alt="tempura" >
    <img src="./../imagen/portada/tradicional.png" alt="tradicional" >
</section><!--portada-1 写真ここまで-->


<!-- portada-2 presentacion -->
<section id="portada-2">
    <strong>Presentación</strong>
    <p class="contenido">
    Si vives en otro país, será difícil encontrar mismos ingredientes que se usan en Japón,
    pero hay muchos ingredientes que se pueden sustitulir y podrás probar la comida japonesa en tu casa.
    !Así que este web se llama <span> "ComidaJPC"</span>.
    Aquí encontrarás no solo platos tipicos, sino la comida que se come en el día a día
    </p>
</section> <!--portada-2 presentacionここまで-->

</article> <!--portada と presentacion を横並びにする為ここまで-->

</main>
</body>

【CSSファイル】
/*余白を最初に取っておく*/
*{margin: 0; padding: 0;}

/*container 画面全体を囲って表示の範囲指定*/
.container {width: 960px; margin: 0 auto; padding: 0;}


/* mainの配置 */
main{margin-top: 120px; border: solid 1px;}


/*webページをふわっと出す*/
body{animation: fadeIn 4s ease 0s 1 normal;}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}}

/*body 基本設定*/
body{background-image: url("./../imagen/fondo.png");
     background-size: cover; /*背景全面表示*/
     background-attachment: fixed; /*背景固定*/
     font-size:100%;
    }


/*header 基本設定*/
header{display: block;
       position: fixed; top: 10px;z-index: 99; /*メニューバーを上部に固定*/
      }

header{border: solid 2px;}

/*ul li  ・と下線を消す*/
ul{list-style: none;}
li a {text-decoration: none;}


/* 上の左端のロゴ・webタイトル横並び */
#juntar-header {display: flex;}

/* en tu casa と Comida JPC を横並び */
#juntar {display: inline-block;
         display: flex; justify-content: center; } /*要素の横並び・中央寄せ*/


/*ロゴ設定*/
.logo img {display: block;}
.logo img {height: 90px;} /*ロゴ大きさ*/
#logo-arriba .logo img:hover
{box-shadow:0 0 25px rgb(233, 127, 14);} /*シャドー*/


/*タイトルオレンジ枠の設定*/
#titulo-color {background:radial-gradient(#f0ebea, #ee8d05); /*グラデーション*/
               border-radius: 30px 30px 30px 30px;   /*角を丸く*/
               margin-left: 10px;
               width: 860px;
               }

/*タイトル文字・色*/
#juntar .entucasa /*en tu casa*/
               {color: rgba(194, 23, 117, 0.89);
               font-family: 'segoe print','papyrus',sans-serif;
               font-size: 25px;
               padding-top: 10px;

               line-height: 1em;  /*余分な文字余白削除*/
               display: flex; justify-content: center; /*要素の横並び・中央寄せ*/
               }

#juntar .JPC {font-family: 'segoe print','papyrus',sans-serif;
              color: rgb(247, 242, 241);
              font-size: 40px;
              margin-left: 20px;
              line-height: 1em;  /*文字の余白取り*/
              text-shadow:0 0 30px rgb(199, 16, 107),0 0 3px rgb(131, 9, 84),
                0 0 3px rgb(155, 8, 8),0 0 3px rgb(92, 7, 49),
                0 0 3px rgb(87, 5, 5),0 0 3px #f00,0 0 3px #f00,
                0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,
                0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00;
                }


#titulo-color p /*aprende*/
                {color: rgb(22, 122, 13);
                font-weight: 900;
                display: flex; justify-content: center; /*要素の横並び*/
                }


/*メニューバーの大きさ・色設定*/
#menu-boton {background-color:rgb(148, 91, 17);
            border-radius: 15px 15px 15px 15px;   /*角を丸く*/
            }

/*メニューの文字設定*/
nav a {color: rgb(226, 235, 243); }  /*文字の色*/
#home-menu a:hover{color: rgb(204, 240, 44); /*カーソルを置くと色変換*/
                   text-shadow: 0 0 10px chartreuse; }
#home-menu a:active{font-size: 18px;
                    color: rgb(204, 240, 44); /*カーソルを置くと色変換*/
                    text-shadow: 0 0 10px chartreuse;}
#menu-boton li {margin-right: 30px;}  /*文字と文字の横の間*/
#home-menu {display: flex; justify-content: center;}  /*要素の横並び*/


### 試したこと

container を div で body の外や中にも書いてみました。
インターネットで問題の検索をし、参考資料を読みました。
youtube動画もいくつか見ました。

行動規範の内容に同意します

回答1件

自己解決

さらに検証を続けた結果、<strong>Presentación</strong> に余分な余白がついていたのを見つけることが出来、余白を取るためにdisplay: block;にしてみると、ちゃんと表示されるようになりました。
どこかがはみ出ているとちゃんと表示されないことが勉強になりましたので、以後気を付けます

大変お騒がせしました。

投稿2021/03/13 22:30

yukiko-yukiko

総合スコア11