slider proをwide表示にしようとすると背景表示のようになる

###前提・実現したいこと
初心者です。
SliderProを用いて横幅いっぱいの画像を出そうとしたのですが、背景画像のように表示されてしまい、他のコンテンツが上に被さってしまいます。
また実際にできたとしても、左端に画像がチラチラ見えてしまい、画像が全画面表示されなくなっています。
どうしたらいいでしょうか。

###該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>美味しいパン屋</title>  <link href="css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/slider-pro.css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.sliderPro.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">menu</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"></a></div>  <div class="collapse navbar-collapse" id="defaultNavbar1"> <ul class="nav navbar-nav"> <li><a href="concept.html">概要</a></li> <li><a href="best.html">人気商品</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">商品<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="menu.html">メニュー</a></li> </ul> <li><a href="resav.html">ご予約</a></li> <li><a href="contact.html">お問い合わせ</a></li> </li> </ul> </div> </div> </nav>

     <div id="wide" class="slider-pro">

<div class="sp-slides"> <div class="sp-slide"> <img class="sp-image" src="image/4e53bd0132dee2efdfe1018a2a6a1904_s.jpg"/> </div> <div class="sp-slide"> <img class="sp-image" src="image/bread2.jpg"/> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <h2>NEW</h2> <div class="row text-left"> <div class="col-sm-3 col-md-3 col-lg-3"> <article> <section> <a href="#"><img src="image/image2-1.png"></a> <p> 新商品カレーパン<br>決め手はこのカレー味！<br>この文章は例文です。</p> </section></article></div>

  <div class="col-sm-3 col-md-3 col-lg-3">  <article>
    <section>
    <a href="#"><img src="image/image2-1.png"></a>
          <p> この文章は例文です。<br>この文章は例文です。<br>この文章は例文です。</p>

</section></article></div> <div class="col-sm-3 col-md-3 col-lg-3"> <article> <section> <a href="#"><img src="image/image2-1.png"></a> <p> この文章は例文です。<br>この文章は例文です。<br>この文章は例文です。</p> </section></article></div> <div class="col-sm-3 col-md-3 col-lg-4"> <div class="wrap"><h4><a href="#">もっと見る</a></h4></div></div></div></div> </div>  <div class="container"> <h2>about</h2> <div class="row text-left"> <div class="col-sm-4 col-md-4 col-lg-4"> <p></p> <h5>うさぎのパン屋とは</h5></div> <div class="col-sm-8 col-lg-8"> <p>この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。<br> この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。<br> この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。この文章は例文です。</p> </div> <div class="col-sm-3 col-md-3 col-lg-6"> <div class="wrap"><h4><a href="concept.html">もっと見る</a></h4></div></div> </div></div> <div class="container"> <h2>人気商品</h2> <div class="col-sm-3 col-md-3 col-lg-3"> <article> <section> <a href="#"><img src="image/image2-1.png"></a> <h5>人気一位！</h5> </section></article></div>

  <div class="col-sm-3 col-md-3 col-lg-3">  <article>
    <section>
    <a href="#"><img src="image/image2-1.png"></a>
        <h5>人気二位！</h5>

</section></article></div> <div class="col-sm-3 col-md-3 col-lg-3"> <article> <section> <a href="#"><img src="image/image2-1.png"></a> <h5>人気三位！</h5> </section></article></div></div> <footer> <div class="container"> <h3>アクセス</h3> <div class="col-sm-3 col-md-3 col-lg-3"> <article> <section> <p>愛知県名古屋市○○区○○町1−2−３<br> ○○駅徒歩５分<br> 営業時間<br> 　午前10時〜午後7時まで<br> 定休日<br> 　不定休<br> <font size="+1" ><span class="glyphicon glyphicon-phone-alt"></span> <a href="tel:052123456">052-123-456</a><br> <p>お問い合わせは<a href="contact.html">こちら</a>から</p></font></div> <div class="col-md-3"> <p><div class="map"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13052.980259830612!2d136.908963!3d35.1255575!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xaa951631c838e6bb!2z54ax55Sw56We5a6u!5e0!3m2!1sja!2sjp!4v1512009889778" width="100%" height="100%"frameborder="0" style="border:0" allowfullscreen　&iwloc=B></iframe></p> </section></article></div> </div> <div class="text-center col-lg-12 col-sm-6"> <p>Copyright © 2018· All Rights Reserved · EarthWingMusic</p> </div> </footer> <hr> </div>  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <script> $( document ).ready(function( $ ) { $('#wide').sliderPro({ width: '100%',//横幅 aspectRatio: 4,//縦横比 arrows: false,//左右の矢印 buttons: false,//ナビゲーションボタンを出す slideDistance:0,//スライド同士の距離 loop: true,//ループさせる visibleSize:'100%',//前後のスライドを表示 forceSize:'fullWidth',//sliderの幅 responsive: true,//レスポンシブ対応 }); }); </script> </body> </html>

###試したこと
コンソールのエラーチェックでは問題なく表示されました。
参考サイトをコピー＆ペーストしました。

###補足情報(言語/FW/ツール等のバージョンなど)
Bootstrap4を使用しています。
Dreamweaverで編集しています。