Container-fluid dentro de un container (bootstrap)

Hola buenas tardes a todos, mi consulta es que tengo que hacer que un container tome el 100% del ancho de la pagina (con un color de fondo especifico). Se que no es bueno y no puedo anidar un container-fluid DENTRO DE UN CONTAINER y buscando ejemplos di con lo siguiente:

 <!--Contenedor Principal-->
<div class="container">
     
    <!--Seccion Hero Contacto-->
    <section id="heroContacto">
        <div class="container">
            <div class="row">
                <div id="contact-hero-content" class="col-lg-8">
                    <h1>"La primera regla para obtener éxito es tener una buena preparación"</h1>
                    <p>No dude en contactarnos, tenemos una solución para su necesidad y estamos dispuestos a apoyarlo desde el comienzo, desde el primer contacto.</p>
                </div>

                <div id="contact-hero-button" class="col-lg-4">
                    <a href="#" class="botonHeroContacto">LLAMANOS Y CONVERSEMOS</a> 
                </div>
            </div>
        </div>
    </section>

y en el css intente con esto

#heroContacto{
background-color:#6308c4;    
padding: 30px;
padding-left:0; padding-right:0;
position: relative;
width: 100vw;
left: calc(-1* (100vw - 100%) /2);

}

pero me genera un margin al parecer (ver en la imagen el inferior derecho)

Gracias a todos por sus comentarios,

#heroContacto{
    background-color:#6308c4;    
    padding: 30px;
    padding-left:0; padding-right:0;
    position: relative;
    width: 100vw;
    left: calc(-1* (100vw - 100%) /2);
}

#contact-hero-button{
    width: 100%;
    margin: auto!important;
    text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="heroContacto" class="container-fluid">
            <div  class="container">
                <div class="row">
                    <div id="contact-hero-content" class="col-lg-8">
                        <h1>"La primera regla para obtener éxito es tener una buena preparación"</h1>
                        <p>No dude en contactarnos, tenemos una solución para su necesidad y estamos dispuestos a apoyarlo desde el comienzo, desde el primer contacto.</p>
                    </div>

                    <div id="contact-hero-button" class="col-lg-4">
                        <a href="#" class="botonHeroContacto">LLAMANOS Y CONVERSEMOS</a> 
                    </div>
                </div>
            </div>
        </div>