h1にflexをしていしていないが、勝手にulとh1が横並びになってしまう

前提・実現したいこと

ドットインストールのアプリ紹介ページを作ろう！というレッスンを進めていたときに、タイトルの通りh1が勝手に横並びになってしまいます。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>アプリ</title> 
6  <link rel="stylesheet" href="css/styles.css">
7  <link rel="icon" href="favicon.ico">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9</head>  
10<body>
11  <header>
12    <div class="container">
13      <div class="info">
14        <h1>凄いアプリです</h1>
15        <p>すげええええええええ</p>
16        <a href="" class="btn">ダウンロード</a>
17      </div>
18      <div class="pic">
19        <img src="img/top.png" alt="">
20      </div>
21    </div>
22  </header>
23
24  <section class="features">
25    <h1>すごい特徴</h1>
26    <div class="container">
27
28      <section>
29        <div class="pic">
30          <img src="img/feature1.png" alt="">
31        </div>
32        <div class="info">
33          <h1>すごい</h1>
34          <p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
35        </div>
36      </section>
37      <section>
38        <div class="pic">
39          <img src="img/feature2.png" alt="">
40        </div>
41        <div class="info">
42          <h1>すごい</h1>
43          <p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
44        </div>
45      </section>
46      <section>
47        <div class="pic">
48          <img src="img/feature3.png" alt="">
49        </div>
50        <div class="info">
51          <h1>すごい</h1>
52          <p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
53        </div>
54      </section>
55   
56
57  <section class="members">
58      <h1>メンバー紹介</h1>
59    <ul>
60      <li>
61        <img src="img/member1.png" alt="">
62        <h2>やまだたろう</h2>
63        <p>がんばるがんばるがんばる</p>
64      </li>
65      <li>
66        <img src="img/member2.png" alt="">
67        <h2>あああたろう</h2>
68        <p>がんばるがんばるがんばる</p>
69      </li>
70      <li>
71        <img src="img/member3.png" alt="">
72        <h2>いいいたろう</h2>
73        <p>がんばるがんばるがんばる</p>
74      </li>
75    </ul>
76
77  </section>
78
79  <section class="call-to-action">
80    <h1>いますぐダウンロード</h1>
81    <a href="" class="btn">ダウンロード</a>
82  </section>
83
84  <footer>
85    (c)dotinstall.com
86  </footer>
87
88</body>
89</html>
90

css
1body {
2  margin: 0;
3  font-size: 16px;
4  font-family: Verdana, sans-serif;
5  color: #333;
6}
7
8header {
9  background: #f59a00;
10  color: #fff;
11  text-align: center;
12  padding-top: 64px;
13}
14
15header h1,header p {
16  margin: 0;
17}
18
19header img {
20  width: 280px;
21  vertical-align: bottom;
22}
23
24.btn {
25  text-decoration: none;
26  background: #fff;
27  color: #f59a00;
28  display: block;
29  width: 140px;
30  line-height: 44px;
31  margin: 40px auto 48px;
32  font-size: 14px;
33  font-weight: bold;
34  border-radius: 4px;
35}
36
37.btn:hover {
38  opacity: 0.9;
39}
40
41.features img {
42  width: 100%;
43}
44
45.features > h1 {
46  text-align: center;
47  padding: 64px;
48  font-weight: normal;
49}
50
51.features .container {
52  margin: 0 32px;
53}
54
55.features p {
56  line-height: 1.8;
57}
58
59.features section {
60  padding-bottom: 64px;
61}
62
63.members {
64  background: #f2f2f3;
65}
66
67.members  h1 {
68  
69  text-align: center;
70  padding: 64px;
71  font-weight: normal;
72}
73
74.members ul {
75  list-style: none;
76  text-align: center;
77  margin: 0;
78  padding: 0;
79}
80
81.members img {
82  width: 160px;
83  border-radius: 50%;
84}
85
86.members h2 {
87  font-size: 20px;
88}
89
90.members li {
91  padding-bottom: 64px;
92}
93
94
95.call-to-action {
96  background: #f59a00;
97  color: #fff;
98  text-align: center;
99  padding: 64px 0;
100}
101
102.call-to-action h1 {
103  font-weight: normal;
104}
105
106.call-to-action .btn {
107  margin: 0 auto;
108}
109
110footer {
111  padding: 64px 0;
112  background: #323135;
113  color: #98969c;
114  text-align: center;
115}
116-----------------
117@media (min-width: 900px) {
118  header .container {
119    display: flex;
120    width: 800px;
121    margin: 0 auto;
122  }
123
124  header .info {
125    width: 60%;
126    align-self: center;
127  }
128
129  header .pic {
130    width: 40%;
131  }
132
133  .features .container {
134    width: 800px;
135    margin: 0 auto;
136  }
137
138  .features section {
139    display: flex;
140    justify-content: space-between;
141  }
142
143  .features section:nth-child(even) {
144    flex-direction: row-reverse;
145  }
146
147  .features .pic {
148    width: 50%;
149  }
150
151  .features .info {
152    width: calc(50% - 32px);
153  }
154  
155  .members  ul {
156    width:800px;
157    margin: 0 auto;
158    display: flex;
159    justify-content: space-between;
160  }
161
162  .members li {
163    width: 250px;
164  }
165}

試したこと

ググっても、勝手に横並びになる事例がありませんでした。

kei344

2020/03/07 03:54

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

prof

2020/03/07 04:05

了解いたしました。ご丁寧にありがとうございます。

Lhankor_Mhy

2020/03/07 04:14

ご提示のコードを試してみましたが、横並びになりませんでした。つまり、問題が再現しません。 kota.workさんは、ご提示のコード**だけ**で問題が再現しますか？再現するのであれば、環境の問題かと思います。問題が再現する環境をご提示ください。再現しないのであれば、ご提示いただいていない部分のコードの問題だと思います。問題が再現するコードをご提示ください。

prof

2020/03/07 04:20

全て追記させていただきました。ぼく自身は、デベロッパーツールを見ていると「他のcss」の影響を受けている用に感じます。