Flexboxを使用して、中の<li>タグを横並びにする方法について

前提・実現したいこと

HTMLの勉強を始めてまだ1週間の超初心者です。
「１冊ですべて身につく　HTML&CSSとWebデザイン　入門講座」という本を使用して勉強しています。

基本のコードを学び、本の手順に沿ってWebサイトを作っている段階です。

発生している問題

Flexboxを使用して中の<li>タグを横並びにしたいのですができません。
何度も入力したコードを見直しましたが、間違いを見つけることが出来なくて行き詰まり困っています。

初歩的な質問で大変申し訳ないのですが、間違いを見つけていただけると幸いです。
よろしくお願いいたします。

該当のソースコード

HTML
1<<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>WBC Cafe</title>
6      <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックコーヒーを提供するカフェ">
7
8    <!--CSS-->
9      <link rel="stylesheet" href="https:/unpkg.com/ress/dist/ress.mi.css">
10      <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
11      <link href="css/syle.css" rel="stylesheet">
12
13  </head>
14
15  <body>
16      <header class="page-header">
17          <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
18          <nav>
19              <ul class="main-nav">
20                  <li><a href="news.html">News</a></li>
21                  <li><a href="menu.html">Menu</a></li>
22                  <li><a href="contact.html">Contact</a></li>
23              </ul>
24          </nav>
25       </header>
26  </body>
27
28</html>

CSS
1@charset "UTF-8";
2
3/*HEADER
4---------------------------------*/
5.logo{
6  widht:210px;
7  margin-top:14px;
8}
9
10/*共通部分
11-------------------------*/
12html{
13  font-size:100%;
14}
15body{
16  font-family: "Yu Gothic Medium","游ゴシック　Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif"
17  line-height:1.7;
18    color:#432;
19}
20a{
21  text-decoration:none;
22}
23img{
24  max-width:100%;
25}
26
27
28.main-nav {
29    display: flex;
30    font-size: 1.25rem;
31    text-transform: uppercase;
32    margin-top: 34px;
33    list-style: none;
34}
35.main-nav li {
36    margin-left: 36px;
37}
38.main-nav a {
39    color: #432;
40}
41.main-nav a:hover {
42    color: #0bd;
43}
44.page-header{
45    display: flex;
46    justify-content: space-between;
47}
48

試したこと

勉強している本の情報を調べましたが、困ったときの解決方法はでできませんでした。
また、Flexboxについて調べても同様でした。

補足情報（FW/ツールのバージョンなど）

本の通り、Atomを使用してコードを書いています。

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

回答2件

何度も入力したコードを見直しましたが、間違いを見つけることが出来なくて行き詰まり

そのわりにhtmlの1行目から間違えていますが・・・

HTML
1<<!DOCTYPE html>
2↓↓↓
3<!DOCTYPE html>

とりあえずcssはbodyのfont-familyの「sans-serif」が後ろにしかクォートがないですね

投稿2019/11/28 10:02

yambejp

総合スコア116661

ベストアンサー

html
1<link href="css/syle.css" rel="stylesheet">

↑を↓とするとどうなりますか？

html
1<link href="css/style.css" rel="stylesheet">

また、

<<!DOCTYPE html>

↑この部分もおかしいと思います。

html
1      <link rel="stylesheet" href="https:/unpkg.com/ress/dist/ress.mi.css">

↑これも↓こうかな。

html
1      <link rel="stylesheet" href="https:/unpkg.com/ress/dist/ress.min.css">

投稿2019/11/28 09:59

編集2019/11/28 10:04

Lhankor_Mhy

総合スコア36928

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／