ヘッダーを横並びにしたい

前提・実現したいこと

添付画像のようにヘッダーのタイトル、言語切り替えボタン、ナビゲーションを横並びにて表示したいのですが、display:flex;にて上手く表示ができずおります。他の方法も検索にて試したのですが、うまくできず、もし解決法をご存知の方がおられましたらご教示いただけますと幸いです。

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

エラーメッセージ

該当のソースコード

html
1ソースコード
2```<body>
3    <!-- ヘッダー -->
4    <header id=”header” class="wrapper">
5        <h1 class="site-title">TITLE</h1>
6        <!-- 言語切り替えボタン作成必要　-->
7        <a class="langage">languages</a>
8        <nav>
9            <ul class="main-nav">
10                <li><a href="#about">事業紹介</a></li>
11                <li><a href="#achievement">実績</a></li>
12                <li><a href="#echnology">技術情報</a></li>
13                <li><a href="#infomation">会社案内</a></li>
14                <li><a href="contact">お問い合わせ</a></li>
15            </ul>
16        </nav>
17    </header>
18
19
20
21
22```CSS
23ソースコード
24```#header{
25    display: flex;
26    justify-content: space-between;
27}
28
29.site-title{
30    font-size: 28px;
31    margin-top: 30px;
32    margin-left: 33px;  
33    font-family: 'Open Sans', sans-serif;
34}
35
36.language{
37    display: inline-block;
38    border: solid 1px #263391;
39    border-radius: 15px;
40    padding: 6px 45px 5px 35px; 
41}
42
43.main-nav{
44    display: flex;
45    font-size: 16px;
46    font-family:　'ヒラギノ角ゴシック';
47    margin-top: 62px;
48    margin-bottom: 20px;
49    list-style: none;
50}
51
52.main-nav li{
53    margin-left: 74px;
54}
55
56.main-nav a{
57    color:#141319;
58}
59
60
61よろしくお願いいたします。
62
63↓完成形
64![イメージ説明](8dfe54031c650232ffe702231748e083.png)
65↓現状況
66![イメージ説明](982a2a6710d2b69ff36d922c0c52e1cc.png)

itagagaki

2021/10/13 10:31

> 上手く表示ができずどう、うまくいっていないのか（期待する結果と違うのは具体的にどこか）を説明していただけますか？とりあえず質問のコードで横並びで表示されているようには見えましたが。

itagagaki

2021/10/13 11:02

提示されているコードをそのままCodePenに貼ってみました。 https://codepen.io/itagagaki/pen/jOLPYNZ 「現状況」のように折り返されてはいないので、何か他の部分が影響しているのでは。

退会済みユーザー

2021/10/13 12:24

itagagakiさんありがとうございます。他の部分も確認してみます。

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

回答1件

ベストアンサー

id=”header” の引用符が全角になってます。

diff
1   <!-- ヘッダー -->
2-   <header id=”header” class="wrapper">
3+   <header id="header" class="wrapper">
4        <h1 class="site-title">TITLE</h1>

投稿2021/10/13 11:40

hatena19

総合スコア33795

退会済みユーザー

2021/10/13 12:25

hatena19さんありがとうございます。こちら見逃してしまっておりました。修正してみたところ、無事反映されました。感謝です。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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