Width が設定できない

CSSが分からない

とんでもないレベルの初心者です。CSSに強い方お助けくださいませ。

発生している問題

header, container-a　のwidth:30%; flex-basis: 30% が効きません。原因が全く分からず……。

該当のソースコード

html
1<section id="wrapper">
2    <div class="wrap">
3            <header>
4                <h2>title</h2>
5            </header>
6            <main>
7                <div class="container-a">
8                    <h3>sub-title</h3>
9                </div>
10                <div class="container-a">
11                    <h3>sub-title</h3>
12                </div>
13            </main>
14    </div>
15</section>

css
1#wrapper {
2    position: relative;
3    text-align: center;
4    width: 100%;
5    height: auto;
6    background-image: linear-gradient(to right, #5d4157 0%, #a8caba 100%);
7}
8.wrap {
9    display: inline-block;
10    margin: 5rem auto 2rem;
11}
12header {
13    display: inline-block !important;
14    margin: 3rem 2rem 1rem;
15    max-width: 300px;
16    height: auto;
17    mix-blend-mode: difference;
18}
19header h2 {
20    position: relative;
21    top: 100%;
22    left: 50%;
23    -ms-transform: translate(-50%,-50%);
24    -webkit-transform: translate(-50%,-50%);
25    transform: translate(-50%,-50%);
26    margin: 15rem auto 0;
27    padding: 0;
28    writing-mode: vertical-rl;
29    -ms-writing-mode: tb-rl;
30    -webkit-writing-mode: vertical-rl;
31    text-orientation: upright;
32    z-index: 102;
33}
34.container-a {
35    margin: 3em 2rem;
36    mix-blend-mode: difference;
37    z-index: 100;
38}
39@media screen and (min-width: 768px) {
40    .wrap {
41         width: 80%;
42         max-width: 1000px;
43        margin: 15rem auto 3rem;
44    }
45    header {
46        margin: 3em auto 5em;
47        float: left;
48    }
49    .wrap::after {
50        display: block;
51        content: '';
52        clear: both;
53    }
54    main {
55        overflow: hidden;
56    }
57    .container-a {
58        max-width: 70%;
59        margin-left: 6rem;
60    }
61}
62@media screen and (min-width: 1024px) {
63    main {
64        margin: 0 auto;
65        display: flex;
66        flex-wrap: wrap;
67        align-content: space-around;
68        justify-content: space-around;
69    }
70    header,
71    .container-a {
72        display: inline-block;
73        position: relative;
74        width: 30% !importnat;
75    }
76    .container-a {
77        flex-basis: 30% !importnat;
78    }
79}