HTML 5 template don't fit in ASP.NET MVC - html

Question

I want to use the carousel part of the HTML5 template that I found, so I put it in the website I'm doing using asp.net mvc.
It works but when I'm hovering to the right arrow, the last content of the carousel is just showing 1/4 of it.
I'm not really sure what is the cause of this, if it's the CSS. So here's the CSS code of the carousel. Help me pleeease.
/* Carousel */
.carousel {
position: relative;
overflow: hidden;
padding: 2em 0 2em 0;
margin-bottom: 0;
}
.carousel .forward, .carousel .backward {
position: absolute;
top: 50%;
width: 6em;
height: 12em;
margin-top: -6em;
cursor: pointer;
}
.carousel .forward:before, .carousel .backward:before {
content: '';
display: block;
width: 6em;
height: 6em;
border-radius: 100%;
background-color: #6e6f74;
position: absolute;
top: 50%;
margin-top: -3em;
-moz-transition: background-color 0.35s ease-in-out;
-webkit-transition: background-color 0.35s ease-in-out;
-o-transition: background-color 0.35s ease-in-out;
-ms-transition: background-color 0.35s ease-in-out;
transition: background-color 0.35s ease-in-out;
-webkit-backface-visibility: hidden;
}
.carousel .forward:after, .carousel .backward:after {
content: '';
width: 3em;
height: 3em;
position: absolute;
top: 50%;
margin: -1.5em 0 0 0;
background: url("images/arrow.svg") no-repeat center center;
}
.carousel .forward:hover:before, .carousel .backward:hover:before {
background-color: #0066cc;
}
.carousel .forward {
right: 0;
}
.carousel .forward:before {
right: -3em;
}
.carousel .forward:after {
right: -0.25em;
}
.carousel .backward {
left: 0;
}
.carousel .backward:before {
left: -3em;
}
.carousel .backward:after {
left: -0.25em;
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
.carousel .reel {
white-space: nowrap;
position: relative;
-webkit-overflow-scrolling: touch;
padding: 0 2em 0 2em;
}
.carousel article {
display: inline-block;
width: 18em;
background: #fff;
text-align: center;
padding: 0 1em 3em 1em;
margin: 0 2em 0 0;
white-space: normal;
opacity: 1.0;
-moz-transition: opacity 0.75s ease-in-out;
-webkit-transition: opacity 0.75s ease-in-out;
-ms-transition: opacity 0.75s ease-in-out;
transition: opacity 0.75s ease-in-out;
}
.carousel article.loading {
opacity: 0;
}
.carousel article .image {
position: relative;
left: -1em;
top: 0;
width: auto;
margin-right: -2em;
margin-bottom: 3em;
}
.carousel article p {
text-align: center;
}
/* Wide */
#media screen and (max-width: 1680px) {
/* Carousel */
.carousel {
padding: 1.5em 0 1.5em 0;
}
.carousel .reel {
padding: 0 1.5em 0 1.5em;
}
.carousel article {
width: 18em;
margin: 0 1.25em 0 0;
}
}
/* Narrower */
#media screen and (max-width: 840px) {
/* Carousel */
.carousel {
padding: 1.25em 0 1.25em 0;
}
.carousel article {
width: 18em;
margin: 0 1em 0 0;
}
}
#media screen and (max-width: 736px) {
/* Carousel */
.carousel {
padding: 0.5em 0 0.5em 0;
}
.carousel .reel {
padding: 0 0.5em 0 0.5em;
}
.carousel article {
width: 14em;
padding-bottom: 2em;
margin: 0 0.5em 0 0;
}
.carousel article .image {
margin-bottom: 2em;
}
}
And here's the .cshtml:
<!-- Carousel -->
<section class="carousel">
<div class="reel">
<article>
<header>
<h3>Pulvinar sagittis congue</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Fermentum sagittis proin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Sed quis rhoncus placerat</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Ultrices urna sit lobortis</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Varius magnis sollicitudin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Pulvinar sagittis congue</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Fermentum sagittis proin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Sed quis rhoncus placerat</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Ultrices urna sit lobortis</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Varius magnis sollicitudin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
</div>
</section>