ヘッダーロゴとリストの横並びができません

下記のコードでロゴとリストの横並びをしようと試みていますが、できていません。
今は「display: flex」で横並びになると思いますがなぜできていないのか原因もわからず
解決したいです。
教えていただけると幸いです。何卒よろしくお願いいたします。
※親要素はここだと

HTML
1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Coding Practice</title>
9    <meta name="description" content="Coding Practiceです">
10    <link rel="stylesheet" href="CSS/reset-html5.css">
11    <link rel="stylesheet" href="CSS/shogo_biginner.css">
12
13</head>
14<body>
15    <header class="header_top">
16    <div class="image_word">
17            <img src="image/logo_transparent.png" id="logo" alt="Coding Practice">
18            <nav> 
19                <ul class="nav_main">
20                    <li>Top</li>
21                    <li>My Challenge</li>
22                    <li>Just Continue</li>
23                </ul>
24            </nav>
25            <img src="image/austin-distel-wawEfYdpkag-unsplash.png" alt="main_image">
26
27            <h1>Coding Practice Everyday!!</h1>
28            <p>Start from HERE</p>
29            
30        </div>
31    </header>
32    <main class="main__contents">
33        <div class="main_title">
34
35        <div class="main_item">
36
37        </div>
38    </div>
39
40    </main>
41
42    <footer>
43        <p class="footer_text">
44            copyright&copy;2020 しょーごログ ALL Rights Reserved.
45        </p>
46
47    </footer>
48    
49</body>
50</html>

CSS
1@charset "UTF-8";
2/*共通項*/
3body{
4    max-width: 1366px;
5}
6
7html{
8    font-size: 100%;
9
10}
11/*ヘッダー*/
12.header_top{
13    max-width: 980px;
14    max-height: 80px;
15    display: flex;
16    justify-content: space-between;
17}
18
19#logo{
20    margin: 20px;
21}
22
23.nav{
24    display: flex;
25}
26.nav_main {
27        margin-bottom: 31px;
28        display: inline-block;
29        display: flex;
30        font-weight: Helvetica bold;
31        justify-content: space-between;
32}
33
34/*メイン*/
35.main_contents{
36    max-width: 960px;
37}
38
39/*フッター*/
40.footer{
41    background-color: #333;
42    max-height: 80px;
43}
44.footer_text{
45    text-align: center;
46}

K_3578

2021/04/06 00:52

cssもコードブロックで囲んでください。あと、<code>押したときの ``` ｢コード｣←これは消すようにしましょう ```

free_teku

2021/04/06 00:54

CSSもコードを押したのですが、なぜか表記がHTMLとおなじになりません。

K_3578

2021/04/06 00:56

編集画面見たところ、 .footer_text{ text-align: center; } の下にバッククォート(```)がないと思われます。

dit.

2021/04/06 00:59

以下のような形にしてください ```html ここにHTML ``` （HTMLとCSSの間は1行以上開ける） ```css ここにCSS ```

dit.

2021/04/06 01:14

こうです。（略） </html> ``` ```CSS @charset "UTF-8"; （略）

K_3578

2021/04/06 01:17

今の形だとhtmlのコードブロックを ```CSS　のバッククォートで閉じてるため、ブロック化出来てないですね。 </html>の下にバッククォート入れましょう

K_3578

2021/04/06 01:18

@dit.さん指摘色々被った･･･申し訳ないです。

dit.

2021/04/06 01:42

>K_3578さんこちらこそ被せてしまったようですみません

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

回答2件

ベストアンサー

.header_topの中でロゴとリスト（nav）を横並びにするのであれば、以下のような構造にする必要があると思います。

html
1<header class="header_top">
2  <div>ロゴ部分</div>
3  <div>リスト部分</div>
4</header>

css
1.header_top{
2   display: flex;
3}

現状<header class="header_top">の子要素は<div class="image_word">の1つのため、横並びになりません。

すごく簡易的な書き方をすると、ロゴ画像とリストを横並び、さらにリストを横並び　の場合以下のようになります。

html
1<header class="header_top">
2  <div>
3    <img src="image/logo_transparent.png" id="logo" alt="Coding Practice">
4  </div>
5  <div>
6    <nav> 
7      <ul class="nav_main">
8        <li>Top</li>
9        <li>My Challenge</li>
10        <li>Just Continue</li>
11      </ul>
12    </nav>
13  </div>
14</header>

css
1.header_top{
2  display: flex;
3}
4.nav_main {
5  display: flex;
6}

※alt="main_image"がついてる画像とか<h1>Coding Practice Everyday!!</h1>あたりはheader内に入れる必要があるかわからなかったのでとりあえず外してます。

投稿2021/04/06 01:41

dit.

総合スコア3235

free_teku

2021/04/07 06:15

dit.さん、ありがとうございます。 div要素を複数ないと横並びには出来ないんですね？横並びに出来ました。ありがとうございます。

dit.

2021/04/07 13:09

div限定では無いです。 .nav_mainでdisplay:flex;したらその中のliが横並びになっているのと同じです。 miyabi_takatsukさんの回答にもありますが、横並びにしたい要素のひとつ上の要素にdisplay:flex;を指定します。

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

display: flexを効かせている要素の、子要素が一つしか存在しないからです。
横並びにしたい要素の直親要素に対して、display: flexを効かせるのが、
display: flexの使い方です。

投稿2021/04/06 00:58

miyabi_pudding

総合スコア9555

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ヘッダーロゴとリストの横並びができません

関連した質問