画像・説明文を左右に配置したいが、反映されない

###実現したいこと
ドットインストール「実践！ウェブサイトを作ろう」の#10を参考に、左右交互に画像と説明文を配置するコードを入力しましたが
うまく反映されません。
どこが間違っているのか、教えていただけないでしょうか？

現状は以下の通りです。
・feture1の画像は左、説明文はその画像の右
・feture2の画像は左、説明文はその画像の下
・feture３の画像は右、説明文はその画像の下

したいことは、以下の通りです。
・feture1の画像は左、説明文はその画像の右
・feture2の画像は右、説明文はその画像の左
・feture３の画像は左、説明文はその画像の右

HTML
1<!DCTYPE 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    <link rel="stylesheet" href="css/styles.css">
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
9
10  </head>
11  <body>
12    <header class="orange-bg">
13      <div class="container">
14        <h1>Dotinstall Pane</h1>
15        <p>
16        ドットインストールを見ながら<br>
17        コーディングができるAtomパッケージ
18        </p>
19        <a href="#" target="_blank" class="btn">詳細を見る <i class="fas fa-external-link-alt"></i></a>
20        <img src="img/top.png"
21        width="480" height="270" alt="Dotinstall Paneの画像">
22      </div>
23
24    </header>
25
26    <section class="features">
27      <div class="container">
28        <h1 deta-subtitle="- Features -"
29         class="section-title">Dotinstall Paneの特徴</h1>
30
31        <section class="feature">
32          <img src="img/feature1.png"
33           width="420" height="270" alt="特徴1">
34          <div class="desc">
35            <h1>すごい特徴があるよ1！</h1>
36            <p>いろいろあります。いろいろあります。いろいろあります。
37              いろいろあります。いろいろあります。いろいろあります。
38              いろいろあります。いろいろあります。いろいろあります。
39              いろいろあります。いろいろあります。いろいろあります。
40              いろいろあります。いろいろあります。いろいろあります。
41              いろいろあります。いろいろあります。いろいろあります。
42              いろいろあります。いろいろあります。いろいろあります。</p>
43          </div>
44        </section>
45
46        <section class="feature">
47          <img src="img/feature2.png"
48           width="420" height="270" alt="特徴2">
49          <div class="desc">
50            <h1>すごい特徴があるよ2！</h1>
51            <p>いろいろあります。いろいろあります。いろいろあります。
52              いろいろあります。いろいろあります。いろいろあります。
53              いろいろあります。いろいろあります。いろいろあります。
54              いろいろあります。いろいろあります。いろいろあります。
55              いろいろあります。いろいろあります。いろいろあります。
56              </p>
57          </div>
58        </section>
59
60        <section class="feature">
61          <img src="img/feature3.png"
62           width="420" height="270" alt="特徴3">
63          <div class="desc">
64            <h1>すごい特徴があるよ3！</h1>
65            <p>いろいろあります。いろいろあります。いろいろあります。
66              いろいろあります。いろいろあります。いろいろあります。
67              いろいろあります。いろいろあります。いろいろあります。
68              いろいろあります。いろいろあります。いろいろあります。
69              いろいろあります。いろいろあります。いろいろあります。
70              いろいろあります。いろいろあります。いろいろあります。
71              </p>
72          </div>
73        </section>
74
75      </div>
76    </section>
77
78  </body>
79
80</html>
81

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