flexboxを使用しているが、要素が横並びにならない

前提・実現したいこと

flexboxで要素を横並びにしたい【iOS Safari】

ここに質問の内容を詳しく書いてください。
display:-webkit-flex;
display: flex;
を使用しているのに要素.header nav ulが横並びにならない。

■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6<title>〇〇FITNESS</title>	
7<link rel="stylesheet" href="css/normalize.css">
8<link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11
12	<header class="header">
13	  <h1>〇〇FITNESS</h1>
14
15	  <section class="hamburger">
16	    <a class="nav-button" href="#">
17	    <span></span>
18	    <span></span>
19	    <span></span>
20	    </a>
21	  </section>
22
23	  <nav>
24	    <ul>
25	     <li><a href="#">TOP</a></li>
26	     <li><a href="#">施設案内</a></li>
27	     <li><a href="#">採用情報</a></li>
28	     <li><a href="#">お問い合わせ</a></li>
29	     <li class="phone">012-3456-7890</li>
30	    </ul>
31	  </nav>
32
33	</header>

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

css
1.header {
2　　display:-ms-flexbox;
3　　display:-webkit-flex;
4　　display: flex;
5　　-ms-flex-pack:justify;
6　　-webkit-justify-content: space-between;
7　　justify-content:space-between;
8　　align-items: center;
9　　width: 100%;
10　　height: 100px;
11　　position: absolute;
12   z-index: 1;
13}
14
15.header h1 {
16　　margin: 0 0 0 25px; 
17　　font-size: 2.5rem;
18　　color: #fff;
19}
20
21.header nav ul {
22　　display:-ms-flexbox;
23　　display:-webkit-flex;
24　　display: flex;
25　　align-items: center;
26　　font-size: 1.2rem;
27}
28
29.header nav ul li {
30　　margin: 0 20px;
31}
32
33header nav li a {
34   color: #fff;
35}
36
37header nav li a:hover {
38   opacity: 0.6;
39}
40
41.header nav li.phone {
42　　margin: 0 30px 0 10px;
43   padding: 0 25px;
44　　border: 1px solid #fff;
45　　line-height: 50px;
46　　display: block;
47　　color: #fff;
48}

ソースコード

試したこと

ここに問題に対して試したことを記載してください。
flexboxを使い横並びにする方法を検索しその通りにやったが、横並びにならない。

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

ここにより詳細な情報を記載してください。

kei344

2020/02/24 10:58

（質問文は編集できます）質問文のコード（HTML/CSS）はそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2020/02/24 14:02

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

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

回答1件

ベストアンサー

行頭の空白が全角空白なので、半角に直しましょう。

CSS
1.header {
2　　display:-ms-flexbox;
3　　display:-webkit-flex;
4　　display: flex;
5　　-ms-flex-pack:justify;
6　　-webkit-justify-content: space-between;
7　　justify-content:space-between;
8　　align-items: center;
9　　width: 100%;
10　　height: 100px;
11　　position: absolute;
12   z-index: 1;/* ここの行頭は問題ない */
13}
14
15.header h1 {
16　　margin: 0 0 0 25px; 
17　　font-size: 2.5rem;
18　　color: #fff;
19}
20
21.header nav ul {
22　　display:-ms-flexbox;
23　　display:-webkit-flex;
24　　display: flex;
25　　align-items: center;
26　　font-size: 1.2rem;
27}
28
29.header nav ul li {
30　　margin: 0 20px;
31}
32
33header nav li a {
34   color: #fff;/* ここの行頭は問題ない */
35}
36
37header nav li a:hover {
38   opacity: 0.6;/* ここの行頭は問題ない */
39}
40
41.header nav li.phone {
42　　margin: 0 30px 0 10px;
43   padding: 0 25px;/* ここの行頭は問題ない */
44　　border: 1px solid #fff;
45　　line-height: 50px;
46　　display: block;
47　　color: #fff;
48}