display:flex;が効かない

困っていること

現在HTMLとCSSでデザインカンプからのコーディングをしています。

ヘッダー内のロゴとナビゲーションメニューをdisplay:flexで横並びに配置させたいのですが、横並びになりません。
自分では原因がわからないのでどなたか教えていただきたいです。よろしくお願いします。

試したこと(自分でチェックしたこと)

・display:flexは子要素ではなく親要素に指定しています

参考画像(1枚目：完成イメージ　2枚目：現状)

HTML
1<!DOCTYPE html>
2
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>KAKERU MIYAICHIの自転車紹介</title>
8    <meta name="description" content="KAKERU MIYAICHIが自慢の自転車を紹介するサイト">
9    <link rel="stylesheet" href="CSS/style.css">
10    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
11    <link rel="icon" type="image/ico" href="img/favicon.ico">
12</head>
13
14<body>
15    <header>
16        <div class="container">
17            <h1　class="site-title"><a href="index.html"><img src="img/logo.svg" alt="Profile"></a></h1>
18            <nav>
19                <ul>
20                    <li><a href="#">About</a></li>
21                    <li><a href="#">Bicycle</a></li>
22                </ul>
23            </nav>
24        </div>
25    </header>    
26
27    <main>
28        <div class="top">
29            <img src="img/mainvisual.jpg" alt="ロードバイクの写真">
30        </div>
31        <div class="about">
32            <div class="container">
33                <h2>About</h2>
34                <div class="profile">
35                    <img src="img/about.jpg" alt="プロフィール写真">
36                    <div class="profile-contents">
37                        <h3>KAKERU MIYAICHI</h3>
38                        <p>テキストテキストテキストテキストテキストテキストテキスト<br>
39                        テキストテキストテキストテキストテキストテキストテキスト<br>
40                        テキストテキストテキストテキストテキストテキストテキスト</p>
41                    </div>
42                </div>
43            </div>
44        </div>
45        <div class="bicycle">
46            <div class="container">
47                <h2>Bicycle</h2>
48                <div class="items">
49                    <div class="item">
50                        <img src="img/bicycle1.jpg" alt="ロードバイクの写真">
51                        <div class="item-text">
52                            <h3>タイトルタイトル</h3>
53                            <p>テキストテキストテキスト</p>
54                        </div>
55                    </div>
56                    <div class="item">
57                        <img src="img/bicycle2.jpg" alt="ロードバイクの写真">
58                        <div class="item-text">
59                            <h3>タイトルタイトル</h3>
60                            <p>テキストテキストテキスト</p>
61                        </div>
62                    </div>
63                    <div class="item">
64                        <img src="img/bicycle3.jpg" alt="ロードバイクの写真">
65                        <div class="item-text">
66                            <h3>タイトルタイトル</h3>
67                            <p>テキストテキストテキスト</p>
68                        </div>
69                    </div>
70                </div>
71            </div>
72        </div>
73    </main>
74
75    <footer>
76        <p><small>&copy; 2020 Profile</small></p>
77    </footer>
78</body>
79
80</html>

CSS
1@charset "UTF-8";
2
3/* 共通部分
4------------------------ */
5*{
6    box-sizing: border-box;
7}
8
9html{
10    font-size: 100%;
11}
12
13body{
14    color: #383E45;
15}
16
17a{
18    text-decoration: none;
19}
20
21
22.container{
23    max-width: 960px;
24    padding: 0 4%;
25    margin: 0 auto;
26    text-align: center;
27}
28
29/* HEADER
30-------------------------*/
31header{
32    height: 60px;
33}
34
35header .container {
36    display: flex;
37    justify-content: space-between;  
38    align-items: center; 
39}
40
41header img{
42    width: 120px;
43}
44
45header ul{
46    display: flex;
47}
48
49header li{
50    list-style: none;
51    margin-left: 24px;
52    font-size: 14.4px;
53    line-height: 17px;
54}
55
56li a{
57    color: #24292E;
58}
59
60/* MAIN
61--------------------------- */
62
63/*  TOP */
64
65.top{
66    margin-bottom: 89px;
67}
68
69.top img{ 
70    height: 600px;
71    width: 100%;
72    object-fit: cover;
73}
74
75/* ABOUT */
76
77.about{
78    margin-bottom: 107px;
79    
80}
81
82.about h2{
83    font-size: 32px;
84    border-bottom: 1px solid #383E45;
85    display: inline-block;
86    margin-bottom: 69px;
87}
88
89.profile{
90    display: flex;
91    justify-content: center;
92}
93
94.profile-contents{
95    text-align: left;
96}
97
98.profile-contents h3{
99    font-size: 16px;
100    margin-top: 6px;
101    margin-bottom: 15px;
102}
103
104.profile-contents p{
105    font-size: 14.4px;
106}
107
108.profile img{
109    width: 100px;
110    height: 100px;
111    border-radius: 50%;
112    margin-right: 30px;
113}
114
115/* BICYCLE */
116
117.bicycle{
118    margin-bottom: 117px;
119}
120
121.bicycle h2{
122    font-size: 32px;
123    border-bottom: 1px solid #383E45;
124    display: inline-block;
125    margin-bottom: 60px;
126}
127
128.items{
129    display: flex;
130    justify-content: space-around;
131}
132
133.item{
134    width: 31%;
135}
136
137.item img{
138    width: 100%;
139    margin-bottom: 13px;
140}
141
142.item h3{
143    margin-bottom: 17px;
144    font-size: 16px;
145}
146
147.item p{
148    font-size: 14.4px;
149}
150
151
152/* FOOTER */
153
154footer{
155    text-align: center;
156    padding-bottom: 12px;
157    font-size: 0.625rem;
158}
159
160/* モバイル版
161------------------------- */
162
163@media (max-width: 600px){
164    .top img{
165        width: 100%;
166    }
167
168}

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

回答1件

ベストアンサー

html
1            <h1　class="site-title"><a href="index.html"><img src="img/logo.svg" alt="Profile"></a></h1>

上記の <h1 の後の全角空白を半角空白に修正したらどうでしょう。

投稿2021/10/04 08:17

hatena19

総合スコア34075

ss-ss

2021/10/04 08:27

回答ありがとうございます。半角にしたら解決しました。。。涙初歩的なミスですみません。本当にありがとうございます。今回はCSSの指定ばかりあれこれイジってましたが、次回以降はHTMLの初歩的なミスもきちんとチェックするようにします！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

display:flex;が効かない

困っていること

試したこと(自分でチェックしたこと)

参考画像(1枚目：完成イメージ　2枚目：現状)

関連した質問

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

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

困っていること

試したこと(自分でチェックしたこと)

参考画像(1枚目：完成イメージ 2枚目：現状)

関連した質問

参考画像(1枚目：完成イメージ　2枚目：現状)