

現在作成中のサイトで、トップのメニューバーがおかしくなってしまいます。  
PCで見るときはいいのですが、スマホ(iPhone SE)で見ると `ul` タグの左側 (`li` タグの左側？)に空白が入ってしまいます。

どのCSSが原因なのかChromeのDevToolsでいくつかCSSを消してみたのですが、どれを消してみても空白が消えません。どうすれば消えますか？

一応HTMLとCSSのメニューバーのところだけ載せさせていただきます。  
もし他の部分も必要であれば追記します。  
(JavaScriptはclassを切り替えるのみなので省略します)

**HTML**

[code]

    <!DOCTYPE html>
    <html lang="ja" dir="ltr">
      <head>
        <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>タイトル</title>
        <link rel="stylesheet" href="/../css/top.css">
        <script src="/js/top.js"></script>
      </head>
      <body>
        <ul id="menus">
          <li class="page_title">ロゴ</li>
          <li class="normal">メニュー1</li>
          <li class="normal">メニュー2</li>
          <li class="normal">メニュー3</li>
          <li class="normal">メニュー4</li>
          <li class="normal">メニュー5</li>
          <li class="normal">メニュー6</li>
        </ul>
      </body>
    </html>
    
[/code]

**CSS**

[code]

    body {
      display: flex;
      flex-direction: column;
    }
     
    .page_title{
        background-color: #dda0dd;
        border-radius: 10px;
        cursor: default;
    }
    
    .normal{
        cursor: pointer;
    }
    
    #menus{
        overflow: hidden;
        background-color: #4b0082;
        width: 100%;
        height: 20%;
        text-align: center;
        color: white;
        font-size: 1.5vw;
    }
    
    #menus li{
        float: left;
        list-style: none;
        margin: auto 3px;
        width: 10%;
    }
    
    .normal:hover{
        background-color: #9370db;
        cursor: pointer;
    }
    
    @media screen and (max-width: 480px) {
            #menus{
                overflow: hidden;
                background-color: #4b0082;
                width: 100%;
                height: 50%;
                text-align: center;
                color: white;
                font-size: 5vw;
                margin: 2px auto;
            }
            
        
         #menus li{
            list-style: none;
            margin: 2px 3px;
            width: 100%;
            text-align: center;
        }
    }
    
[/code]


CC BY-SA 4.0
2022-09-18T17:38:54.490
91164
2022-09-20T08:18:24.953
2022-09-20T08:18:24.953
3060
46953
question
html css
iPhone での表示時、ul の左側に変な空白ができてしまう


コメントいただいた通りpadding:0;をメニューバーのulに追加したら無事に中央になりました。


CC BY-SA 4.0
2022-09-19T00:50:06.263
91165
2022-09-19T00:50:06.263
46953
91164
answer