説明文を左右に配置したいのですが反映されません。

ドットインストールの「実践！ウェブサイトを作ろう編」で<body>の説明文章を左右に振りたいのですが、動画通りにコードを入力しても反映されません。

恐らく「スタイルシート」内の「nth-of-type()」の「（）」部分が正常に機能していないのかなと思っています。
どこのコードがおかしいのか教えていただけませんでしょうか？

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

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Dotinstall Paneを使ってみよう</title>
6  <link rel="icon" href="favicon.ico">
7  <script src="https://kit.fontawesome.com/05146493a1.js"></script>
8  <link rel="stylesheet" href="css/styles.css">
9</head>
10<body>
11  <header class="orange-bg">
12    <div class="container">
13      <h1>Dotinstall Pane</h1>
14      <p>
15        ドットインストールを見ながら<br>
16        コーディングができるAtomパッケージ
17      </p>
18      <a href="#" target="_blank" class="btn">詳細を見る
19        <i class="fas fa-external-link-alt"></i></a>
20      <img src="img/top.png" width="480" height="270" alt="Dotinstall Paneの画像">
21      </div>
22  </header>
23
24  <section class="features">
25    <div class="container">
26      <h1 data-subtitle="-Features-"
27      class="section-title">Dotinstall Paneの特徴</h1>
28
29      <section class="feature">
30        <img src="img/feature1.png"
31        widht="420" height="270" alt="特徴1">
32        <div class="desc">
33          <h1>すごい特徴があるよ！</h1>
34          <p>いろいろあります。いろいろあります。いろいろあります。
35            いろいろあります。いろいろあります。いろいろあります。
36            いろいろあります。いろいろあります。いろいろあります。
37            いろいろあります。いろいろあります。いろいろあります。
38            いろいろあります。いろいろあります。いろいろあります。</p>
39          </div>
40        </section>
41      <section class="feature">
42        <img src="img/feature2.png"
43        widht="420" height="270" alt="特徴2">
44        <div class="desc">
45          <h1>すごい特徴があるよ！</h1>
46          <p>いろいろあります。いろいろあります。いろいろあります。
47            いろいろあります。いろいろあります。いろいろあります。
48            いろいろあります。いろいろあります。いろいろあります。
49            いろいろあります。いろいろあります。いろいろあります。
50            いろいろあります。いろいろあります。いろいろあります。</p>
51          </div>
52        </section>
53      <section class="feature">
54        <img src="img/feature3.png"
55        widht="420" height="270" alt="特徴3">
56        <div class="desc">
57          <h1>すごい特徴があるよ！</h1>
58          <p>いろいろあります。いろいろあります。いろいろあります。
59            いろいろあります。いろいろあります。いろいろあります。
60            いろいろあります。いろいろあります。いろいろあります。
61            いろいろあります。いろいろあります。いろいろあります。
62            いろいろあります。いろいろあります。いろいろあります。</p>
63          </div>
64        </section>
65      </div>
66    </section>
67</body>
68</html>
69

該当のソースコード

css
1body {
2  font-size: 16px;
3  font-family: Verdana, sans-serif;
4  color: #333;
5  margin: 0;
6}
7
8.container {
9  width: 820px;
10  margin: 0 auto;
11  padding: 60px 0;
12}
13
14.orange-bg {
15  color: #fff;
16  background: url(../img/bg.png);
17  background-size: cover;
18}
19
20.section-title {
21  text-align: center;
22  font-weight: normal;
23  font-size: 24px;
24}
25
26.section-title::after {
27  content: attr(data-subtitle);
28display: block;
29font-size: 16px;
30color: #aaa;
31padding-top: 10px;
32}
33
34/* header */
35
36header h1 {
37   margin-top: 0;
38   font-weight: normal;
39   font-size: 36px;
40   margin-bottom: 8px;
41}
42
43header p {
44  margin-top: 0;
45  margin-bottom: 50px;
46}
47
48header .container {
49  position: relative;
50}
51
52header img {
53  position: absolute;
54  bottom: 0;
55  right: 0;
56}
57
58.btn {
59  display: inline-block;
60  width: 290px;
61  background: #fff;
62  color: #f39800;
63  text-align: center;
64  text-decoration: none;
65  padding: 8px 0;
66  border-radius: 5px;
67  opacity: 0.9;
68}
69
70.btn:hover {
71  opacity: 1.0;
72}
73
74/* features */
75
76.feature h1 {
77  font-weight: normal;
78  font-size: 18px;
79}
80
81.feature .desc {
82  width: 360px;
83}
84
85.feature:nth-of-type(odd) .desc {
86  float: right;
87  padding-left: 40px;
88}
89
90.feature:nth-of-type(even) .desc {
91  float: left;
92  padding-right: 40px;
93}
94

試したこと

ここに問題に対して試したことを記載してください。

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

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

hatsu

2019/07/13 05:27

僕が試したところ現在は、特徴2が左、特徴1,3が右にきているのですがどうなっているのが理想でしょうか？mm

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

回答1件

eventとoddのfloatの指定が逆です。
oddは「奇数」、evenは「偶数」という意味なので
oddのときにfloat: left;
evenのときにfloat: right;の指定が正しいです。

あと.descへの指定は不要です。
正しくは以下の通り。

css
1.feature:nth-of-type(odd) {
2  float: left;
3  padding-left: 40px;
4}
5
6.feature:nth-of-type(even) {
7  float: right;
8  padding-right: 40px;
9}