＠mediaが効きません

前提・実現したいこと

＠mediaを使って、Pタグの文章やaタグを移動させたいです。

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

移動ができません。
font-sizeなどは反映されるので、@media自体は効いてると思います。

.carousel-caption h1と.btn-flat-borderをページの真ん中に表示させたいです。

該当のソースコード

html
1   <!--- start image slider--->
2    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
3        <ol class="carousel-indicators">
4            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
5            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
6            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
7        </ol>
8        <div class="carousel-inner" role="listbox">
9            <!--- slide1--->
10            <div class="carousel-item active slider-wrapper" style="background-image:url(img/slide0.jpg);">
11                <div class="carousel-caption slider-doc">
12                    <h1>Yukawa-architects</h1>
13                    <a href="#works" class="btn-flat-border">作品集はこちら</a> 
14                </div>
15            </div>
16            <!---slider2--->
17            <div class="carousel-item slider-wrapper" style="background-image:url(img/slide1.jpg);">
18                <div class="carousel-caption slider-doc">
19                    <h1>Yukawa-architects</h1>
20                    <a href="#about" class="btn-flat-border">私たちについて</a>
21                </div>
22            </div>
23            <!---slider3--->
24            <div class="carousel-item slider-wrapper" style="background-image:url(img/slide2.jpg);">
25                <div class="carousel-caption slider-doc">
26                    <h1>Yukawa-architects</h1>
27                    <a href="#profile" class="btn-flat-border">チームについて</a>
28                </div>
29            </div>
30        </div><!--- end carousel--->
31        <!---prev next button-->
32        <div class="prevnext-btn">
33            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
34                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
35            </a>
36            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
37                <span class="carousel-control-next-icon" aria-hidden="true"></span>
38            </a>
39        </div>
40     </div>
41     <!--- end image slider--->

css
1/*---slider---*/
2
3.carousel-item {
4    height: 100vh;
5    background-size: cover;
6}
7
8
9
10.carousel-caption h1 {
11    font-size: 3.8rem;
12    font-weight: 700;
13    letter-spacing: .3rem;
14    text-shadow: .1rem .1rem .8rem black;
15    padding-bottom: 1rem;
16    color: #FFFFFF;
17}
18
19.btn-flat-border {
20    height: 30px;
21    text-align: center;
22    line-height: 30px;
23    font-size: 25px;
24    padding: 0.2em 0.6em;
25    text-decoration: none;
26    text-shadow: .1rem .1rem .1rem black;
27    color: #FFFFFF;
28    border: solid 2px #FFFFFF;
29    border-radius: 3px;
30    transition: .4s;
31    margin-top: 50px;
32  }
33  
34  .btn-flat-border:hover {
35    background: #FFFFFF;
36    color: black;
37    text-shadow: none;
38  }
39
40.slider-wrapper{
41    z-index: 1;
42}
43.prevnext-btn{
44    z-index: 2;
45}
46
47.slider-doc{
48    position: relative;
49    top: 400px;
50    left: -200px;
51}
52
53/*---media queries---*/
54
55@media (max-width: 767px) {
56    .slider-wrapper {
57        margin: 0 auto 2rem;
58    }
59
60    .carousel-caption h1 {
61        text-align: center;
62        font-size: 2.3rem;
63        letter-spacing: .1rem;
64        padding-bottom: .5rem;
65    }
66    
67    
68    .btn-flat-border {
69
70    }
71
72    .narrow h1 {
73        font-size: 1.5rem;
74    }
75
76    p.lead {
77        font-size: 1rem;
78    }
79}
80