トップページの写真サイズがブートストラップのカードのコンテナが効いてサイズ指定ができない

前提・実現したいこと

トップページの写真サイズがブートストラップのカードのコンテナが効いてサイズ指定ができないです。
コンテナ（container）を消すとカードが横いっぱいに広がるので、
写真は横いっぱいに表示させて、カードは今のまま表示したいです。

何か方法等ないでしょうか。

該当のソースコード

html
1<section class="mast">
2   <figure class="mast__bg">
3       
4   </figure>
5  <header class="mast__header  js-clippy">
6    <h5 class="mast__pretitle">ようこそ</h5>
7    <h2 class="mast__title">company</h2>
8    <hr class="sep">
9  </header>
10</section>
11
12
13<div class="row row-cols-md-3">
14  <% @posts.each do |post| %>
15    <div class="col-md-3">
16      <div class="card">
17          <%= attachment_image_tag post, :post_image, class: "card-img-top"%>
18          <div class="card-body">
19          <h4 class="card-title"><%=post.title%></h4>
20          <h6 class="card-subtitle text-primary"><%=post.subject%></h6>
21          <h6 class="card-subtitle text-muted"><%=post.teacher_name%></h6>
22          <p class="card-text"><%=post.content%></p>
23          <div class="text-center">
24             <% if current_user == post.user %>
25                  <%= link_to "削除", post, method: :delete, data: { confirm: "You sure?" }, class: 'btn btn-danger btn-sm' %>
26                  <%= link_to "編集", edit_post_path(post), class: "btn btn-success btn-sm"%>
27             <%end%>
28          </div>
29        </div>
30      </div>
31    </div>  
32  <% end %>
33</div>
34<%=paginate @posts %>
35

html
1<!DOCTYPE html>
2<html  lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6    <title>college</title>
7    <%= csrf_meta_tags %>
8    <%= csp_meta_tag %>
9
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
11    <link rel="stylesheet" href="sample.css">
12
13    <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
14    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
15    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
16    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
17    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
18    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
19  </head>
20
21  <body>
22    <%= render 'layouts/navbar' %>
23<div class="container">
24      <%= render 'layouts/flash_messages' %>
25
26      <%= yield %>
27    </div>
28  </body>
29</html>

css
1/* メイン写真*/
2//----------------------------------------------
3//  z_index_layers()
4//  @description: Creates increasing z-index layers, needed for clip rect effect
5//----------------------------------------------
6@mixin z_index_layers($layers: 7){
7@for $i from 1 through $layers {
8  &:nth-child(#{$i}):not(.site-menu) {   
9   z-index: 1 + $i; 
10  }
11 }
12}
13//----------------------------------------------
14//  little reset
15//----------------------------------------------
16*, *:before, *:after {
17  box-sizing: border-box; 
18  min-width: 0;
19  min-height: 0;
20  margin: 0;
21  padding: 0;
22}
23
24body {
25  margin: 0;
26  width: 100%;
27  font-family: "Source Sans Pro";
28  font-weight: 400;
29  font-style: normal;
30  -ms-text-size-adjust: 100%;
31  -webkit-text-size-adjust: 100%;
32  -webkit-font-smoothing: antialiased;
33  -moz-osx-font-smoothing: grayscale; 
34  text-rendering: optimizeLegibility;
35}
36
37//----------------------------------------------
38//  Borders and animation
39//----------------------------------------------
40.border-top {
41    width: 100%;
42    height: 0.75em;
43    top: 0;
44    width: 0;
45    animation: ani-width ease-in-out 0.5s 0s both;
46  
47  &:after {
48    content: '';
49    bottom: 0;
50    width: 100%;
51    height: 0.75em;
52    right: 0;
53    animation: ani-width ease-in-out 0.5s 1s both;
54  }
55}
56.border-left {
57    height: 100%;
58    width: 0.75em;
59    left: 0;
60    bottom: 0;
61    animation: ani-height ease-in-out 0.5s 1.5s both;
62  
63   &:after {
64    content: '';
65    right: 0;
66    top: 0;
67    height: 100%;
68    width: 0.75em;
69    animation: ani-height ease-in-out 0.5s 0.5s both;
70  }
71}
72.border-top, 
73.border-top:after, 
74.border-left, 
75.border-left:after {
76  position: fixed;
77  z-index: 9;
78  background-color: #fff;
79}
80
81h2{
82  font-family: "Playfair Display";
83  font-weight: 700;
84  font-size: 1.75em;
85  line-height: 1.2;
86  //font-size: 9vmin;
87  @media (min-width: 32em){
88    font-size: 4em;
89  }
90}
91
92hr.sep{
93  border: 0px;
94  height: 1px;
95  background: #fff;
96  margin: 1.4em auto;
97  width: 3em;
98}
99
100//----------------------------------------------
101//  apply z-index mixin
102//----------------------------------------------
103main > section, main > article{
104  @include z_index_layers(3);
105}
106
107//----------------------------------------------
108//  masts
109//----------------------------------------------
110.mast{
111  position: relative;
112  display:flex;
113  align-items:center;
114  height: 100vh;
115  width: 100%;
116  color: #fff;
117  margin-bottom: 1em;
118  
119  &:after{
120    content:'';
121    z-index: 0;
122    position: absolute;
123    top: 0;
124    left: 0;
125    width: 100%;
126    height: 100%;
127    background: rgba(0,0,0,0.7);
128  }
129  
130  &__bg{
131    position: absolute;
132    top: 0;
133    left: 0;
134    height: 100%;
135    width: 100%;
136    margin: 0 auto;
137    padding: 0;
138    background-size: cover;
139    background-color: #111;
140    animation: fade-in 1s ease both;
141  }
142  &__header{
143    z-index: 5;
144    position: fixed;
145    width: 100%;
146    top: 45%;
147    text-align:center;
148    animation: fade-in 2s 1.5s ease both;
149  }
150  
151  &__pretitle{
152    margin-bottom: 0.5em;
153    font-size: 1em;
154    font-weight: 400;
155    text-transform: uppercase;
156    letter-spacing: 0.15em;
157  }
158}
159
160//----------------------------------------------
161//  animation: fade-in
162//----------------------------------------------
163@keyframes fade-in{
164  0%{
165    opacity:0;
166  }
167  100%{
168    opacity: 1;
169  }
170}
171  
172//----------------------------------------------
173//  animation: animate border width
174//----------------------------------------------
175@keyframes ani-width {
176  0% {
177    width: 0;
178  }
179  100% {
180    width: 100%;
181  }
182}
183//----------------------------------------------
184//  animation: animate border height
185//----------------------------------------------
186@keyframes ani-height {  
187  0% {
188    height: 0;
189  }
190  100% {
191    height: 100%;
192  }
193}