I have a problem with a carousel that when it passes to the next slider it moves down a bit as if it had one more line but from the second to the third slider does not move. I already tried to put a blank line to see and the same moves and I do not know why.
@import url('https://fonts.googleapis.com/css?family=Barrio|Monoton|Oregano|Sumana');
@import url('https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display');
html body {
height: 100%;
font-family: 'Open Sans', sans-serif;
background-image: url("../images/fondo.jpg");
background-repeat: no-repeat;
background-position: left;
}
#navbar {
padding-top: 1%;
padding-bottom: 1%;
position: fixed;
z-index: 10000;
top: 0px;
width: 100%;
background-color: rgb(204, 12, 12);
color:white;
}
#nav-a {
color: rgb(255, 255, 255);
font-size: larger;
border-radius: 1rem;
font-family: 'Barrio', cursive;
}
.fa-building-o:before {
color: rgba(255, 255, 255, 0.452);
}
#slogan {
font-family: 'Sedgwick Ave Display', cursive;
font-size: 1.5rem;
}
@media only screen and (max-width: 401px) {
#slogan {
display:none;
} }
#slider {
/* margin-top: 4rem; */
width: 50%;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
/* height: 24rem; */
}
#arrow-prev {
-moz-transform: scaleX(-1); /* Firefox */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Chrome y Safari */
transform: scaleX(-1); /* w3org */
filter: FlipH; /* Internet Explorer */
}
#nav-slider-arrow {
background: none;
}
a:hover {
color:black;
background-color:lightgray;
}
#registro {
margin-top: 2rem;
margin-bottom: 2rem;
}
#registro-logo-card {
text-align: center;
margin-top: 2rem;
}
#registro-card {
width: 20rem;
margin-top: 2rem;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
footer {
/* display: block; */
position: fixed;
width: 100%;
bottom: 0;
text-align: center;
background-color: rgb(204, 12, 12);
padding: 25px 0;
}
.list-inline li {
display:inline;
padding-left:3px;
padding-right:3px;
}
#foot-a {
text-decoration: none;
color:white;
padding: 1rem;
border-radius: 1rem;
font-family: 'Oregano', cursive;
}
.separador {
color:gray;
}
#footer-copyright {
color: rgb(83, 81, 81);
}
.scroll-to-top{
text-decoration: none;
position: fixed;
bottom: 20px;
right: 20px;
display: none;
font-size: 36px;
color: #555;
}
.scroll-to-top:hover{
text-decoration:none;
color: rgb(214, 18, 18);
background: none;
}
.home-row {
font-size: larger;
}
#home-slider {
background: rgba(255, 255, 255, 0.342);
width: 40%;
border-radius: 2px;
padding: 2rem; }
@media only screen and (min-width: 300px) {
#home-slider {
width: 95%;
margin-bottom: 5rem; } }
@media only screen and (min-width: 768px) {
#home-slider {
width: 50%; } }
.carousel-indicators {
bottom: -2rem;
}
.slide-item{
padding: 1rem;
}
#text-slide{
font-family: 'Sumana', serif;
}
#autoedif {
font-family: 'Monoton', cursive;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="wrapper">
<!-- Menú -->
<nav class="navbar navbar-expand-lg navbar-light navbar-fixed-top affix-top" id="navbar">
<div class="row">
<di class="col-2">
<a class="navbar-brand" href="./index.html"><i class="fa fa-building-o" aria-hidden="true"></i></a>
</di>
<div class="col-10">
<p id="slogan">un problema, una solución </br> ¡AutoEdifica!</p>
</div>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="container">
<div class="row justify-content-end navbar-nav">
<a class="nav-item nav-link active" href="#" id="nav-a">Contacto <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#registro"id="nav-a">REGISTRO</a>
</div>
</div>
</div>
</nav>
<a href="#" class="scroll-to-top"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i></a>
</br></br></br></br></br></br>
<!-- Slider -->
<div class="container" id="home-slider">
<div class="row home-row">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="11500">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<p align="justify" id="text-slide"><span style="font-weight:bold">¡AutoEdifica!</span> Es la empresa que llegó a revolucionar
la forma de trabajar, donde tu serás el mandante
y tendrás todos los medios para continuar y
mejorar una necesidad por medio de un par de clics
podrás desarrolar tu proyecto en 3 líneas de
trabajo, mano de obra, proveedor y despacho </br></br>
Todo por un medio <span id="autoedif">"AUTOEDIFICA"</span></p>
<p align="center">Soñar, Crear y Concretar.</p>
</div>
<div class="carousel-item">
<p align="justify" id="text-slide"><span style="font-weight:bold">AutoEdificador:</span> para registrarse y poder acceder a la
gamma de servicios y beneficios solo debes seguir unos
simples pasos que te guiará el sitio en donde podrás
registrarte llenando un formulario y listo.</br> </br>
Podrás entrar a tu perfil en donde diseñarás y distribuirás
de forma fácil y sencilla optimizando tiempo y recurso
todo en un solo lugar <span id="autoedif">¡AUTOEDIFICA!</span></p></br>
</div>
<div class="carousel-item">
<p align="justify" id="text-slide"><span style="font-weight:bold">SocioEdificador:</span> para registrarse y poder acceder
como prestador de servicios o proveedor solo debes de
seguir unos simples pasos que te guiará el sitio
en donde podrás registrarte llenando un formulario
y listo.</br> </br>
Podrás acceder a tu perfil en donde diseñarás y
distribuirás de forma fácil y sencilla optimizando
tiempo y recurso todo en un solo lugar <span id="autoedif">¡AUTOEDIFICA!</span></p></br>
</div>
</div>
</div>
</div> <!-- row -->
</div> <!-- contenedor -->
</br>
<div class="push"></div>
</div> <!-- Wrapper -->
<footer>
<div class="fluid">
<a id="foot-a" href="#">Términos y Condiciones</a>
<span class="separador">| </span> <a id="foot-a" href="#">Política y Privacidad</a>
<span class="separador">| </span> <a id="foot-a" href="#">RRSS</a>
<span class="separador">| </span> <a id="foot-a" href="#">Preguntas Frecuentes</a>
</div>
</footer>