メガメニューを等間隔に並べるにはどうすればよいですか？

現状左側にメニューが偏ってしまっているのですが、
等間隔に並べたいです。
どうすればよいでしょうか？

.menu-container {
  background: #e9e9e9;
  a {
    color:black;
  }
}

.menu-mobile {
  display: none;
  padding: 20px;
  &:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    transform: translateY(-25%);
  }
}

.menu-dropdown-icon {
  &:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
  }
}

.menu {
  max-width:1140px;
  margin:0 auto;
  > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    //position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    &:before,
    &:after {
      content: "";
      display: table;
    }
    &:after {
      clear: both;
    }
    > li {
      float: left;
      background: #e9e9e9;
      padding: 0;
      margin: 0;
      a {
        text-decoration: none;
        padding: 1.5em 3em;
        display: block;
      }
      &:hover {
        background: #f0f0f0;
      }
      > ul {
        display: none;
        width: 100%;
        background: #f0f0f0;
        padding: 20px;
        position: absolute;
        z-index: 99;
        left: 0;
        margin: 0;
        list-style: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        &:before,
        &:after {
          content: "";
          display: table;
        }
        &:after {
          clear: both;
        }
        > li {
          margin: 0;
          padding-bottom: 0;
          list-style: none;
          width: 25%;
          background: none;
          float: left;
          a {
            color: #777;
            padding: .2em 0;
            width: 95%;
            display: block;
            border-bottom: 1px solid #ccc;
          }
          > ul {
            display: block;
            padding: 0;
            margin: 10px 0 0;
            list-style: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            &:before,
            &:after {
              content: "";
              display: table;
            }
            &:after {
              clear: both;
            }
            > li {
              float: left;
              width: 100%;
              padding: 10px 0;
              margin: 0;
              font-size: .8em;
              a {
                border: 0;
              }
            }
          }
        }
        &.normal-sub {
          width: 300px;
          left: auto;
          padding: 10px 20px;
          > li {
            width: 100%;
            a {
              border: 0;
              padding: 1em 0;
            }
          }
        }
      }
    }
  }
}

<section class="nav">
    <div class="menu-container">
      <div class="menu">
        <ul>
          <li><a href="#">代理店を探す</a></li>
          <li><a href="http://marioloncarek.com">よく分かる代理店の見つけ方</a>
            <ul>
              <li><a href="#">代理店の種類</a>
                <ul>
                  <li><a href="#">Lidership</a></li>
                  <li><a href="#">History</a></li>
                  <li><a href="#">Locations</a></li>
                  <li><a href="#">Careers</a></li>
                </ul>
              </li>
              <li><a href="#">Study</a>
                <ul>
                  <li><a href="#">Undergraduate</a></li>
                  <li><a href="#">Masters</a></li>
                  <li><a href="#">International</a></li>
                  <li><a href="#">Online</a></li>
                </ul>
              </li>
              <li><a href="#">Research</a>
                <ul>
                  <li><a href="#">Undergraduate research</a></li>
                  <li><a href="#">Masters research</a></li>
                  <li><a href="#">Funding</a></li>
                </ul>
              </li>
              <li><a href="#">Something</a>
                <ul>
                  <li><a href="#">Sub something</a></li>
                  <li><a href="#">Sub something</a></li>
                  <li><a href="#">Sub something</a></li>
                  <li><a href="#">Sub something</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">業界別マーケティング施策</a>
            <ul>
              <li><a href="#">Today</a></li>
              <li><a href="#">Calendar</a></li>
              <li><a href="#">Sport</a></li>
            </ul>
          </li>
          <li><a href="http://marioloncarek.com">Contact</a>
            <ul>
              <li><a href="#">School</a>
                <ul>
                  <li><a href="#">Lidership</a></li>
                  <li><a href="#">History</a></li>
                  <li><a href="#">Locations</a></li>
                  <li><a href="#">Careers</a></li>
                </ul>
              </li>
              <li><a href="#">Study</a>
                <ul>
                  <li><a href="#">Undergraduate</a></li>
                  <li><a href="#">Masters</a></li>
                  <li><a href="#">International</a></li>
                  <li><a href="#">Online</a></li>
                </ul>
              </li>
              <li><a href="#">Study</a>
                <ul>
                  <li><a href="#">Undergraduate</a></li>
                  <li><a href="#">Masters</a></li>
                  <li><a href="#">International</a></li>
                  <li><a href="#">Online</a></li>
                </ul>
              </li>
              <li><a href="#">Empty sub</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </section>

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

回答1件

ベストアンサー

こんばんは。

以下のようにするのはいかがでしょうか？

css
1.menu > ul {
2	display: flex;
3	justify-content: space-between;
4}

投稿2020/09/02 15:56

Lhankor_Mhy

総合スコア36960

takawork

2020/09/02 17:25

ありがとうございます！ちなみに>はどういう意味なのでしょうか？記号なので上手くぐぐれず困っています。

Lhankor_Mhy

2020/09/03 00:39

別の質問で、「cssを学び終えた」と書いていませんでしたか……？ https://developer.mozilla.org/ja/docs/Web/CSS/Child_combinator

dit.

2020/09/03 02:06

記号そのものでうまく検索できない場合には、読み方などで検索するといいです。「css　記号」「css　不等号」「css　大なり」あたりのキーワードで検索したところ、どの結果もだいたい同じような説明サイトが上位に出てきました。（子結合子という名前で説明されているサイトは少なかったですが）

Lhankor_Mhy

2020/09/03 07:27

よく見ると、ここでも同じことを聞いていますね…… > >は親セレクタの特定要素のみに対して使うスタイルとわかったのですが、 https://teratail.com/questions/288377#reply-408868 私も忘れっぽいので人のことはあまり言えませんけれど…… レファレンスになるようなページはブックマークしておくといいことがありますよ。

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