ヘッダーのナビゲーションメニューを、スマホ表示→横に2列にしたいです。

前提・実現したいこと

該当のソースコード

html
1<nav>
2       <ul class="sitemenu">
3         <li class="menu"><a href="about.html">
4           ご利用の流れ
5         </a></li>
6         <li class="menu"><a href="abot2.html">
7           ご利用規約
8         </a></li>
9         <li class="menu"><a href="rental.html">
10           料金プラン
11         </a></li>
12         <li class="menu"><a href="gallery.html">
13           内装
14         </a></li>
15         <li class="menu"><a href="contact.html">
16           お問い合わせ
17         </a></li>
18         <li class="menu"><a href="contact.html">
19           ご利用予約
20         </a></li>
21         <li class="menu"><a href="qa.html">
22           よくある質問
23         </a></li>
24         <li class="menu"><a href="qa.html">
25           アクセス
26         </a></li>
27       </ul>
28      </nav>

css
1
2
3@media screen and (max-width: 768px){
4  .sitemenu{
5    background-image: url(../img/header.jpg);
6    display: flex;
7    flex-wrap: wrap;
8    width: 100%;
9  }
10  .menu{
11   width:25%;
12   list-style: none;
13   border: 1px solid white;
14   text-align: center;
15  }
16}
17
18
19.sitemenu{
20  background-image: url(../img/header.jpg);
21  display: flex;
22  justify-content: space-between;
23}
24
25.menu{
26 list-style: none;
27 display: block;
28 width: 100%;
29 height: 100%;
30 border: 1px solid white;
31 text-align: center;
32 padding: 5px;
33}

上記のｃｓｓだと、スマホ閲覧時にすべてのメニューが縦1列にずらっと並んでしまいます。

画像のように横2列にしたいのですが、上記のｃｓｓでは変化しませんでした。
初心者で伝わりづらく申し訳ありませんが、どなたかご教示頂けると幸いです。

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

回答1件

ベストアンサー

CSSは後に書いた物で上書きされます。

CSS
1.sitemenu{
2  background-image: url(../img/header.jpg);
3  display: flex;
4  justify-content: space-between;
5}
6
7.menu{
8 list-style: none;
9 display: block;
10 width: 100%;
11 height: 100%;
12 border: 1px solid white;
13 text-align: center;
14 padding: 5px;
15}
16
17@media screen and (max-width: 768px){
18  .sitemenu{
19    background-image: url(../img/header.jpg);
20    display: flex;
21    flex-wrap: wrap;
22    width: 100%;
23  }
24  .menu{
25   width:25%;
26   list-style: none;
27   border: 1px solid white;
28   text-align: center;
29  }
30}
31```**動くサンプル：**[https://jsfiddle.net/f5xo8jtm/](https://jsfiddle.net/f5xo8jtm/)