スマホサイズ（〜767px）時に画像を横幅いっぱいにしたい

前提・実現したいこと

CREATOR TOPICSの画像を横幅いっぱいに表示させたい
（余白が消えません。マージンやパディングは設定していません。）

完成メージは下記サイトのCREATORS TOPICSです。
768px以下だと各トピックスが横幅いっぱいに広がります。
（https://www.uuum.jp/）

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="トップページ">
6    <title>サイト</title>
7    <link rel="icon" href="favicon.ico">
8    <link rel="stylesheet" href="stylesheet.css">
9    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
11    <link rel="stylesheet" href="slick-theme.css" type="text/css">
12
13    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
14    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
15    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
16</head>
17<body>
18    <div class="custom-container px-0">
19        <div class="topics">
20            <h2 class="topics_ttl text-center">
21                CREATOR TOPICS
22            </h2>
23            <h5 class="sub_ttl text-center">
24                マーレン劇団の日常を発信するクリエイターマガジン
25            </h5>
26
27            <div class="topics row">
28                <a href="#" class="topics-item col-lg-4 col-md-6 mb-4">
29                    <img src="img/1.jpg" alt="">
30                    <p class="my-1">みやゆう 2019年4月に大阪でのイベント詳細を発表！</p>
31                    <span class="text-primary">イベント</span>
32                    <time class="text-muted">
33                        2019.03.15
34                    </time>
35                </a>
36                <a href="#" class="topics-item col-lg-4 col-md-6 mb-4">
37                    <img src="img/1.jpg" alt="">
38                    <p class="my-1">みやゆう 2019年4月に大阪でのイベント詳細を発表！</p>
39                    <span class="text-primary">イベント</span>
40                    <time class="text-muted">
41                        2019.03.15
42                    </time>
43                </a>
44                <a href="#" class="topics-item col-lg-4 col-md-6 mb-4">
45                    <img src="img/1.jpg" alt="">
46                    <p class="my-1">みやゆう 2019年4月に大阪でのイベント詳細を発表！</p>
47                    <span class="text-primary">イベント</span>
48                    <time class="text-muted">
49                        2019.03.15
50                    </time>
51                </a>
52                <a href="#" class="topics-item col-lg-4 col-md-6 mb-4">
53                    <img src="img/2.jpg" alt="">
54                    <p class="my-1">みやゆう 2019年4月に大阪でのイベント詳細を発表！</p>
55                    <span class="text-primary">イベント</span>
56                    <time class="text-muted">
57                        2019.03.15
58                    </time>
59                </a>
60                <a href="#" class="topics-item col-lg-4 col-md-6 mb-4">
61                    <img src="img/2.jpg" alt="">
62                    <p class="my-1">みやゆう 2019年4月に大阪でのイベント詳細を発表！</p>
63                    <span class="text-primary">イベント</span>
64                    <time class="text-muted">
65                        2019.03.15
66                    </time>
67                </a>
68                <a href="#" class="topics-item col-lg-4 col-md-6 mb-4">
69                    <img src="img/2.jpg" alt="">
70                    <p class="my-1">みやゆう 2019年4月に大阪でのイベント詳細を発表！</p>
71                    <span class="text-primary">イベント</span>
72                    <time class="text-muted">
73                        2019.03.15
74                    </time>
75                </a>
76            </div>
77
78            <div class="more text-right">
79                <a href="#">
80                    READ MORE >
81                </a>
82            </div>
83        </div>
84    </div>
85
86    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
87    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
88    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
89</body>
90</html>
91

CSS
1@media (max-width: 767px) {
2    .custom-container {
3        max-width: 100%;
4        margin-left: 0;
5        margin-right: 0;
6    }
7
8    .topics-item img{
9        width: 100vw;
10    }
11}
12
13@media (max-width: 435px) {
14    .manu-item img {
15        display: block;
16        margin: 0 auto;
17    }
18}
19
20.custom-container {
21    max-width: 80%;
22    margin-left: 10%;
23    margin-right: 10%;
24}
25
26.topics {
27    font-size: 14px;
28}
29
30.topics.row a {
31    text-decoration: none;
32    color: #000;
33}
34
35.topics_ttl {
36    padding-top: 48px;
37}
38
39.topics-item img {
40    max-width: 100%;
41    height: auto;
42}
43
44.topics.row time::before {
45    content: "|";
46    color: #000;
47}
48
49.more {
50    padding-bottom: 30px;
51    border-bottom: 2px solid #DDD8D8;
52}