Bootstrap 4 carousel show 3 items, but actual page only shows1 image - carousel

Question

I made a test page (up live now) with a carousel that should show 3 images and advance. I tried to follow the code from this https://www.codeply.com/go/s3I9ivCBYH/bootstrap-4-responsive-carousel-one-at-a-time On my page it only shows one image at a time. I copied the code from codeply and modified the src for my images. I added the css to my linked custombs4.css page and added the javascript at the bottom of the page.
Can you help figure this out? thanks in advance
<--- at the bottom of the page before closing body tag --->
$('#carouselExample').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $('.carousel-item').length;
if (idx >= totalItems-(itemsPerSlide-1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i=0; i<it; i++) {
// append slides to end
if (e.direction=="left") {
$('.carousel-item').eq(i).appendTo('.carousel-inner');
}
else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
});
<--- css linked on :http://www.pscompetitiveedge.com/css/custombs4.css --->
media (min-width: 768px) {
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active">
<img class="img-fluid mx-auto d-block" src="slide/1.jpg" alt="teamwork">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/2.jpg" alt="fire eating">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/3.jpg" alt="fire walk">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/4.jpg" alt="trust fall">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/5.jpg" alt="trust fall 2">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/6.jpg" alt="crew">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/7.jpg" alt="fire eating 2">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/8.jpg" alt="fire eating 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<i class="fa fa-chevron-right fa-lg text-muted"></i>
<span class="sr-only">Next</span>
</a>

Answer 1

The problem is on line 320 of your custombs4.css, you are missing a # before media. Which makes it like a media tag and you don't notice any issue. As soon as a Fix it everything works fine
Before
After