Tengo un formulario de pago en mi página, que cree con clases de bootstrap, pero aparece una línea que no logro sacar, que se sale hacia los costados del form, quiero poder achicarla para que solo sea divisoria de la sección, pero sin salirse hacia los costados.
Adjunto código HTML del formulario y el CSS del archivo, ¿alguna solucion? ¿puede ser que sea problema de los divs? estoy empezando a usar bootstrap y a veces se me generan estos problemas, creo que para alguien con conocimientos es fácil de solucionar.
.bg-image {
background-image: url(https://images6.alphacoders.com/989/thumb-1920-989983.jpg);
height: 50vh;
}
h1 {
text-align: center;
padding-top: 5px;
}
h3 {
text-align: center;
}
h3 a:hover{
color: white;
}
h4 {
color: #eeb125;
}
<body>
<!--NAVBAR-->
<div class="d-flex bd-highlight">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="home.html" style="font-family: Antonio, sans-serif;">
<img class="d-inline-block align-text-top" src="../assets/logos/amarillo transparente.png" alt="logo 'Soy Bostero'" width="40" height="40">
Soy Bostero
</a>
</div>
<ul class="nav navbar-nav d-flex flex-row gap-4">
<li><a href="historial.html">Mis compras</a></li>
<li><a href="datos.html">Mis datos</a></li>
<li><a href="pagos.html">Pagos</a></li>
</ul>
<ul class="nav navbar-nav d-flex flex-row gap-4">
<li class="navbar-right d-flex"><button class="boton-nav" type="button" data-bs-toggle="modal" data-bs-target="#ModalForm">
Inicia sesion
</button></li>
<li class="navbar-right d-flex"><button class="boton-nav" type="button" data-bs-toggle="modal" data-bs-target="#modalRegisterForm">
Quiero asociarme
</button></li>
</ul>
</div>
</nav>
</div>
<!--Banner de compra-->
<div class="bg-image">
<h1>Obtene tu popular para el proximo partido</h1>
<h3><a href="#compraform" data-toggle="modal" data-target="#compraform">Boca Juniors vs Colo Colo (9.08.2023)</a></h3>
</div>
<div class="container-fluid">
<div class="container-fluid" style="background-color: #002b87; padding-right: 0px; margin-right: 0px;">
<h1 class="noticias">Tu historial de compras</h1>
</div>
</div>
<!--Form comprar-->
<div class="modal fade" id="compraform" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Completa tu compra</h4>
</div>
<form action="#" class="credit-card-div">
<div class="panel panel-default" >
<div class="panel-heading">
<div class="row ">
<div class="col-md-12">
<span class="help-block small-font">Numero</span>
<input type="text" class="form-control"/>
</div>
</div>
<div class="row ">
<div class="col-md-3 col-sm-3 col-xs-3">
<span class="help-block small-font" >Mes de vto</span>
<input type="text" class="form-control" placeholder="MM" maxlength="2"/>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span class="help-block small-font" >Año de vto</span>
<input type="text" class="form-control" placeholder="YY" max="2" />
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span class="help-block small-font" >CCV</span>
<input type="text" class="form-control" placeholder="CCV" maxlength="3" minlength="3"/>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img src=".." class="img-rounded" />
</div>
</div>
<div class="row ">
<div class="col-md-12 pad-adjust">
<span class="help-block small-font">Nombre del titular</span>
<input type="text" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-md-12 pad-adjust">
<div class="checkbox">
<label>
<input type="checkbox" checked class="text-muted">Guardar datos para proximas compras</input>
</label>
</div>
</div>
</div>
<div class="row ">
<div class="modal-footer d-flex justify-content-center">
<button type="submit" data-dismiss="modal">PAGAR</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/bootstrap/bootstrap.bundle.js"></script>
</body>
Antes del botón enviar es donde aparece la línea, se sale hasta afuera.