jQuery.BgSwitcherというプラグインを使うと空白ができるので解決したい

jQuery.BgSwitcherというプラグインを使ったところ
背景画像が画面の横幅を超えてしまいスクロールバーが出現します。
プラグインのみなら問題ないのですが、div要素などほかの要素をつけると発生します。

図のように横にスクロールバーが出てしまいます。

これを解決し、ウィンドウサイズに収める方法はないものでしょうか

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>【jQuery】bgSwitcherのデモページ1</title>
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8
9<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
10<script src="js/jquery.bgswitcher.js"></script>
11<script>
12jQuery(function($) {
13    $('.bg-slider').bgSwitcher({
14        images: ['img/bg1.jpg','img/bg2.jpg','img/bg3.jpg'], // 切り替える背景画像を指定します。
15    });
16});
17</script>
18
19<style type="text/css">
20body{margin:0}
21.bg-slider {
22	width: 100vw;
23	height: 100vh;
24	background-position:center center;
25	background-size: cover;
26	display: flex;
27	align-items: center;
28	justify-content: center;
29}
30.bg-slider__title{
31	color: #fff;
32	font-size: 48px;
33	line-height: 1.5;
34	text-align:center;
35	text-shadow: 1px 1px 1px #000;
36}
37
38</style>
39
40</head>
41<body>
42
43  <h1>ふるさとは食卓に。</h1>
44  <h2>今日もすこやかに、元気に。毎日のごはんと一緒に。</h2>
45
46<div class="bg-slider">
47  <h1 class="bg-slider__title">BGSWITCHER DEMO PAGE<br>【DEFAULT】</h1>
48</div>
49
50
51
52
53
54
55</body>
56</html>
57