Swiper coverflow blank when in Div container

Question

Let me prefix that I'm not very skilled nor know many good practices, I'm learning by doing as projects come about.

I'm using Swiper for a game list slider, but when its put inside another Div it just disappears. I can position and size it correctly outside the Div, but I can't make it responsive that way and its very unorganized.

Below is the section, with the schedule to be on the left and the game slider to be on the right. When outside of the Games Div it will show, but when inside the Div it entirely disappears.

        <!-- Start of schedule container -->
    <div id="info-wrapper">
        <section id="info">
            <div id="schedule" class="container">

                <div class="row">
                    <div class="col">
                        <h1 id="title"> Stream Schedule</h1>
                    </div>
                </div>

                <div class="row">
                    <div id="dates" class="col">
                        <h1> Mondays </h1></div>
                    <div class="col">
                        <p>9:00 - 10:00 PM </p>
                    </div>
                </div>

                <div class="row">
                    <div id="dates" class="col">
                        <h1> Tuesdays </h1></div>
                    <div class="col">
                        <p>9:00 - 10:00 PM </p>
                    </div>
                </div>

                <div class="row">
                    <div id="dates" class="col">
                        <h1> Wednesdays </h1></div>
                    <div class="col">
                        <p>9:00 - 10:00 PM </p>
                    </div>
                </div>

                <div class="row">
                    <div id="dates" class="col">
                        <h1> Thursdays </h1></div>
                    <div class="col">
                        <p>9:00 - 10:00 PM </p>
                    </div>
                </div>

                <div class="row">
                    <div id="dates" class="col">
                        <h1> Fridays </h1></div>
                    <div class="col">
                        <p>9:00 - 10:00 PM </p>
                    </div>
                </div>
            </div>

            <!-- Container for game list -->
            <div id="games" class="container">
              <h1 id="title"> What I've been playing </h1> 

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>

                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
    </div>

    </section>

Full CSS below for main stylesheet. All other styles for Swiper can be found at http://idangero.us/swiper/

body, html {
     height: 100%;
     width: 100%;
}
 body {
     margin: 0;
     padding: 0;
     color: #fff;
     font-size: 100%;
     line-height: 1.25em;
     font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
}
 a {
     text-decoration: none;
     color: inherit;
}
 .clear:after, .clear:before, .container:after, .container:before {
     content: "";
     display: table;
}
 .clear:after, .container:after {
     clear: both;
}
 .clear, .container {
     zoom: 1;
}
 #header ul #nav li a:hover, .accent, .btn:hover {
     background: #rgba(62, 24, 82, 1);
     color: #fff;
}
 .forum {
     padding: 3px 8px 4px 8px !important;
}
 .btn:hover {
     border-color: #6246a3;
}
 .container {
     padding: 0 3%;
}
 #header {
     position: fixed;
     z-index: 100;
     top: 0;
     left: 0;
     width: 100%;
     box-sizing: border-box;
     padding: 40px 35px;
}
 #header #displayname {
     margin: 0;
     padding: 0;
     font-size: 137%;
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
}
 .label {
     font-family: Arial, sans-serif;
     font-size: 54%;
     letter-spacing: 1px;
     padding: 0 8px;
     border-radius: 1em;
     -webkit-border-radius: 1em;
     -moz-border-radius: 1em;
     white-space: nowrap;
     vertical-align: middle;
     font-weight: 700;
     margin-top: -4px;
     display: inline-block;
}
 #header ul#nav {
     margin: 2px 0 0;
     padding: 0;
}
 #header ul#nav li {
     display: inline-block;
     list-style: none;
     font-size: 120%;
}
 #header ul#nav li a {
     padding: 3px 8px;
     border-radius: 100px;
     -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
     transition: background .3s ease;
     outline: none;
}
 #content {
     box-sizing: border-box;
     padding: 132px 0;
     width: 100%;
     height: 100%;
     display: table;
     text-align: center;
     background: rgba(0, 0, 0, .7);
}
 #content .container {
     display: table-cell;
     vertical-align: middle;
}
 .avatar {
     border-radius: 50%;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     margin-bottom: 25px;
     width: 145px;
     height: 145px;
}
 .name {
     color: #eee;
     font-size: 104%;
     font-weight: 600;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin: 0 0 7px;
     line-height: 1.5em;
}
 .status {
     font-size: 220%;
     line-height: 1.3em;
     font-weight: 300;
     letter-spacing: 0;
     margin: 0 0 20px;
}
 .btn {
     padding: 15px 24px;
     border: 1px solid #FFF;
     border-radius: 30px;
     -webkit-border-radius: 30px;
     -moz-border-radius: 30px;
     font-size: 100%;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: 700;
     white-space: nowrap;
     vertical-align: middle;
     display: inline-block;
     transition: background ease .3s;
}
 .live {
     background: rgba(62, 24, 82, 1);
     border: none;
     -webkit-animation: pulse 2s infinite;
     -moz-animation: pulse 2s infinite;
     -o-animation: pulse 2s infinite;
     animation: pulse 2s infinite;
}
 .label .live-status {
     font-size: 20px;
     line-height: 19px;
     vertical-align: middle;
     margin-right: 3px;
}
 #footer {
     position: absolute;
     z-index: 100;
     bottom: 0;
     left: 0;
     width: 100%;
     box-sizing: border-box;
     padding: 14px 30px;
}
 #footer p {
     font-size: 80%;
     color: #FFF;
     font-weight: 600;
     opacity: .4;
     transition: opacity ease .3s;
     line-height: 1em;
}
 #footer p:hover {
     opacity: .8;
}
 #footer .left {
     float: left;
}
 #footer .right {
     float: right;
}
 @media (min-width: 801px) {
     #header #displayname {
         float: left;
    }
     #header ul#nav {
         float: right;
    }
     #header ul#nav li {
         margin-left: 21px;
    }
}
 @media (max-width: 800px) {
     #header {
         padding: 24px 20px 20px;
    }
     #header #displayname {
         text-align: center;
    }
     #header ul#nav {
         margin: 20px auto 0;
         text-align: center;
    }
     #header ul#nav li {
         margin: 0 4px 12px;
    }
}
 @media (max-width: 750px) {
     .name {
         font-size: 100%;
    }
     .status {
         font-size: 200%;
    }
     .btn {
         width: 80%;
    }
     .avatar {
         width: 120px;
         height: 120px;
    }
     #footer p {
         font-size: 60%;
         padding: 0px 0px;
    }
     .accent, .btn:hover, #header ul#nav li a:hover {
         background: #330066;
    }
     .btn:hover {
         border-color: #330066;
    }
     .live {
         background: #330066;
         border: none;
    }
     @-webkit-keyframes pulse {
         from {
             opacity: 1.0;
             -webkit-box-shadow: 0 0 15px #330066;
        }
         50% {
             opacity: 0.8;
             -webkit-box-shadow: none;
             0 0 0px #330066;
        }
         to {
             opacity: 1.0;
             -webkit-box-shadow: 0 0 15px #330066;
        }
    }
     @-moz-keyframes pulse {
         from {
             opacity: 1.0;
             -moz-box-shadow: 0 0 15px #330066;
        }
         50% {
             opacity: 0.8;
             -moz-box-shadow: none;
             0 0 0px #330066;
        }
         to {
             opacity: 1.0;
             -moz-box-shadow: 0 0 15px #330066;
        }
    }
     @-o-keyframes pulse {
         from {
             opacity: 1.0;
             -o-box-shadow: 0 0 15px #330066;
        }
         50% {
             opacity: 0.8;
             -o-box-shadow: none;
             0 0 0px #330066;
        }
         to {
             opacity: 1.0;
             -o-box-shadow: 0 0 15px #330066;
        }
    }
     @keyframes pulse {
         from {
             opacity: 1.0;
             box-shadow: 0 0 15px #330066;
        }
         50% {
             opacity: 0.8;
             box-shadow: none;
             0 0 0px #330066;
        }
         to {
             opacity: 1.0;
             box-shadow: 0 0 15px #330066;
        }
    }
}
 #content {
     background: rgba(0, 0, 0, .8) 
}
 #live {
     background: url("http://www.tokkoro.com/picsup/2860789-batman-the-dark-knight-joker-messenjahmatt___movie-wallpapers.jpg") no-repeat center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     height: 100vh;
}
 #info-wrapper {
     background: url("../img/cell.jpg") no-repeat center center;
}
 #info {
     height: 60vh;
     width: 100%;
     padding: 0;
     margin: 0;
     background-color: rgba(39, 0, 59, .8);
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
}
 #schedule {
     background-color: rgba(0, 0, 0, .4);
     display: inline-flex;
     flex-direction: column;
     width: 30vh;
     height: auto;
     float: left;
}
 #dates {
     font-size: 80%;
}
 #dates .p {
     font-size: 100%;
}
/* Games Section Wrapper */
 .swiper-container {
     width: 50%;
     height: 50%;
}
 .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #fff;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
    /* Center slide text vertically */
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
}
 #title {
     color: #fff;
     font-size: 150%;
     font-weight: 600;
     letter-spacing: 2px;
}
 .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {
     position: relative;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
}
 .col-xs-5ths {
     width: 20%;
     float: left;
}
/* Pulse Animations Min */
 @-webkit-keyframes pulse {
     from {
         opacity: 1;
         -webkit-box-shadow: 0 0 12px #6246a3;
    }
     50% {
         opacity: .8;
         -webkit-box-shadow: none;
         : 0 0 0 #6246a3;
    }
     to {
         opacity: 1;
         -webkit-box-shadow: 0 0 12px #6246a3;
    }
}
 @-moz-keyframes pulse {
     from {
         opacity: 1;
         -moz-box-shadow: 0 0 12px #6246a3;
    }
     50% {
         opacity: .8;
         -moz-box-shadow: none;
         : 0 0 0 #6246a3;
    }
     to {
         opacity: 1;
         -moz-box-shadow: 0 0 12px #6246a3;
    }
}
 @-o-keyframes pulse {
     from {
         opacity: 1;
         -o-box-shadow: 0 0 12px #6246a3;
    }
     50% {
         opacity: .8;
         -o-box-shadow: none;
         : 0 0 0 #6246a3;
    }
     to {
         opacity: 1;
         -o-box-shadow: 0 0 12px #6246a3;
    }
}
 @keyframes pulse {
     from {
         opacity: 1;
         box-shadow: 0 0 12px #6246a3;
    }
     50% {
         opacity: .8;
         box-shadow: none;
         : 0 0 0 #6246a3;
    }
     to {
         opacity: 1;
         box-shadow: 0 0 12px #6246a3;
    }
}
/* Querying additional screen sizes. */
 @media (min-width: 768px) {
     .col-sm-5ths {
         width: 20%;
         float: left;
    }
}
 @media (min-width: 992px) {
     .col-md-5ths {
         width: 20%;
         float: left;
    }
}
 @media (min-width: 1200px) {
     .col-lg-5ths {
         width: 20%;
         float: left;
    }
}
 

Please let me know if I'm lacking any more information here and I'll update! Scratching my head with this, so thank you in advance for any help!

Answer 1

Add CSS:

#games{
    height: 100%;
}