display Flexが効かない

main->-contaier->section内にあるpicクラスとinfoクラスを左寄せにするため、pcクラスとinfoクラスの親要素であるsectionクラスにdisplay flexを記述しましたが、左寄せになりません。

どこが間違っているのか分からない状態です。
ご教示いただけたらと思います。

HTML
1<main>
2        <h1>特徴</h1>
3        <div class="container">
4            <sction>
5                <div class="pic">
6                    <img src="img/sample.png">
7                </div>
8
9                <div class="info">
10                    <h2>特徴-1</h2>
11                    <p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
12                </div>
13            </sction>
14
15            <sction>
16                <img src="img/sample2.png">
17                <h2>特徴-2</h2>
18                <p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
19            </sction>
20            
21            <sction>
22                <img src="img/sample3.png">
23                <h2>特徴-3</h2>
24                <p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
25            </sction>
26        </div>
27    </main>

CSS
1body{
2    margin: 0;
3    font-size: 16px;
4    font-family: Verdana, sans-serif;
5    color: #333333;
6}
7
8header h1,
9header p{
10    margin: 0;
11}
12
13header{
14    background: #f59a00;
15    color: #ffffff;
16    text-align: center;
17}
18
19header img{
20    width: 280px;
21    vertical-align: bottom;
22}
23
24header .btn{
25    display: block;
26    background: #ffffff;
27    color: #f59a00;
28    text-decoration: none;
29    width: 200px;
30    text-align: center;
31    margin: 40px auto 48px;
32    font-weight: bold;
33    border-radius: 4px;
34    font-size: 14px;
35}
36
37.btn:hover{
38    opacity: 0.8;
39}
40
41main .container {
42    margin: 0 32px;
43    background-color: gray;
44}
45
46
47.container img{
48    width: 100%;
49}
50
51
52main > h1{
53    text-align: center;
54    border: none;
55}
56main img{
57    width: 100%;
58}
59
60section{
61    display: flex;
62}
63