wordpressのメニューが横並びになりません。

前提・実現したいこと

度々質問失礼します。
wordpress歴1か月程度の初心者です。

現在ドットインストール様を参考に簡単なwordpressのブログサイトを作成しようとしています。

発生している問題・エラーメッセージ

色々問題が起こっているのですが…
とりあえずメニューの問題を質問させていただきます。

初歩的な質問でしたら申し訳ありません。

ダッシュボード > 外観 > メニューから3つのメニューを作成したのですが、縦並びになってしまいます。これを横並びにするにはどのようにすればいいでしょうか…？

https://d.kuku.lu/8a66c53405

↑状況のSSです、画像のうまい貼り方が分かりませんでした…ごめんなさい。

PHP
1<?php get_header(); ?>
2
3<body <?php body_class(); ?>>
4  <header>
5    <div class="container">
6      <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
7      <nav>
8        <?php wp_nav_menu(); ?>
9      </nav>
10    </div>
11  </header>
12
13  <main>
14    <div class="container flex">
15      <div id="posts">
16        
17        <?php
18          if ( have_posts() ) : // もし投稿が1件以上あったら
19            while ( have_posts() ) : // 投稿の表示条件を満たす間は繰り返す
20              the_post(); // データ1件分を取り出して渡す
21        ?>
22        
23        <div id="post">
24          <div class="post-header">
25            <h2> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2>
26            <div class="post-meta"><?php echo get_the_date(); ?>【<?php the_category(', '); ?>】</div>
27          </div>
28          <div class="post-content">
29            <div class="post-image">
30              
31              <?php if( has_post_thumbnail() ) : // サムネイル画像があったら
32                  the_post_thumbnail( array(100,100) ); // 表示する 
33                  else : //サムネイル画像がなければ ?>
34                <img src="<?php echo esc_url( get_theme_file_uri ( 'img/noimage.png' ) ) ?>" width="100" height="100"> </div>
35              <?php endif; // 条件分岐終了 ?>
36              
37              <div class="post-body">
38                <?php the_excerpt(); ?>
39              </div>
40            </div>
41          </div>
42        </div><!-- /post -->
43
44          <?php
45            endwhile; // 投稿ループ終了
46          else : // もし表示すべき投稿がなかったら
47          ?>
48
49          <p>この記事は存在しません。</p> 
50
51          <?php
52            endif; // 条件分岐終了
53          ?>
54
55      </div>
56      <div class="navigation">
57        <div class="prev"><?php previous_posts_link(); ?></div>
58        <div class="next"><?php next_posts_link(); ?></div>
59      </div>
60      <?php dynamic_sidebar(); ?>
61    </div>
62  </main>
63
64<?php get_footer() ?>

CSS
1@charset "UTF-8";
2/*
3Theme Name: MyTheme
4Template: twentyfifteen
5Author: Mouyan
6*/
7body {
8  font-size: 16px;
9  color: #333;
10}
11a {
12  text-decoration: none;
13}
14p {
15  padding-bottom: 16px;
16  margin: 0;
17  line-height: 1.8;
18}
19.container {
20  width: 800px;
21  margin: 0 auto;
22  overflow: hidden;
23}
24.flex {
25  display: flex;
26  flex-wrap: wrap;
27}
28main .flex {
29  justify-content: space-between;
30}
31/* header */
32h1 {
33  font-weight: bold;
34  font-size: 18px;
35  padding: 15px 0;
36}
37.menu {
38  background: #0198F1;
39  margin-bottom: 30px;
40  font-size: 12px;
41  text-align: center;
42}
43.menu a {
44  display: block;
45  padding: 10px 0;
46  color: #fff;
47  width: 150px;
48  transition: .3s all ease;
49}
50.menu a:hover {
51  background: #49c2ff;
52}
53/* post */
54#posts {
55  width: 635px;
56}
57.post {
58  margin-bottom: 30px;
59}
60.post-header {
61  margin-bottom: 15px;
62}
63.post-header h2 {
64  font-weight: bold;
65}
66.post-meta {
67  font-size: 12px;
68  padding: 7px 0;
69  color: #555;
70}
71.post-content {
72  overflow: hidden;
73}
74.post-image {
75  float: left;
76  width: 115px;
77}
78.post-body {
79  margin-left: 115px;
80}
81/* navigation */
82.navigation {
83  overflow: hidden;
84  padding: 10px 0;
85  font-size: 12px;
86  margin-bottom: 15px;
87}
88.prev {
89  float: left;
90  width: 300px;
91}
92.next {
93  float: right;
94  width: 300px;
95  text-align: right
96}
97/* sidebar */
98#sidebar {
99  width: 150px;
100}
101.widget {
102  margin-bottom: 25px;
103}
104.widget h3 {
105  font-weight: bold;
106  padding-bottom: 7px;
107}
108.widget li {
109  line-height: 1.8;
110}
111/* footer */
112footer {
113  padding: 15px 0;
114  font-size: 12px;
115  color: #aaa;
116  border-top: 1px solid #ccc;
117  text-align: center
118}

ご助力頂けると幸いです。
よろしくお願いいたします。

追記

html部分を確認したいという編集依頼があったので、追記させていただきます。

html
1<nav>
2    <div class="menu-mymenu-container">
3        <ul id="menu-mymenu" class="menu">
4            <li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-102"><a href="/wordpress" aria-current="page">ホーム</a></li>
5            <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://localhost/wordpress/%e3%83%97%e3%83%ad%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab/">プロフィール</a></li>
6            <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://localhost/wordpress/%e3%81%93%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/">このサイトについて</a></li>
7        </ul>
8    </div>
9</nav>

beginner_t

2019/08/21 07:37

<nav><?php wp_nav_menu(); ?></nav>のhtmlの表示をみたいのでそちらも記載してもらえますか？

S_fujii

2019/08/21 07:47

不勉強で申し訳ありません、<nav><?php wp_nav_menu(); ?></nav>に対応するhtmlがあるべきはずということでしょうか？ navに対応するhtmlは作成していないです。

beginner_t

2019/08/21 07:57

すいません。説明が足りなかったですね。開発者ツールでみると該当箇所がhtmlとして出力されているので、それを追記してください。

S_fujii

2019/08/21 08:03

了解しました、ご丁寧にありがとうございます！追記させていただきました。

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

回答1件

ベストアンサー

横並びにするということだけで言えば、

css
1.menu {
2  background: #0198F1;
3  margin-bottom: 30px;
4  font-size: 12px;
5  text-align: center;
6　display: flex;
7}

でできます。

投稿2019/08/21 23:50

beginner_t

総合スコア716

S_fujii

2019/08/22 00:46

解決しました！ wordpress独自タグで生成されたhtmlを見ながらCSSをつけていけばよかったのですね、大変勉強になりました。ありがとうございます！

beginner_t

2019/08/22 01:15

そうですね。実際に付与されるクラスを知ることが大事だと思います。 <?php wp_nav_menu(); ?>にパラメーターを与えるとulにクラスやIDをつけれたり、いろいろできます。codexで確認してみてください。そうすると自由度がもう少し上がります。もっと自由度がほしい場合はWalker_Nav_Menu を調べるといいと思います。

S_fujii

2019/08/22 02:15

そちらも調べてみます、ご丁寧にありがとうございます！

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