Problema al ajustar el ancho de un div con CSS

Tengo el siguiente problema:

Tengo el siguiente código (el código está simplificado, solo para un mejor entendimiento):

<!-- EL CONTENEDOR DE ABAJO TIENE UN ANCHO X-->
<div id="contenedor">
    <article>
        <h1>TITULO</h1>
        <div>
            <h3>Acceso al sistema</h3>
        </div>
        <div>
            <form>
                <div id="fos_user_registration_form">
                    <div>
                        <label>Email</label>
                        <input type="email">
                    </div>
                    <div>
                        <label>Nombre de usuario</label>
                        <input type="text">
                    </div>
                    <div>
                        <label>Contraseña</label>
                        <input type="password">
                    </div>
                    <div>
                        <label>Repita la contraseña</label>
                        <input type="password">
                    </div>
                    <input type="hidden" id="fos_user_registration_form__token">
                </div>
 
                <!-- EL CONTENEDOR DE ABAJO QUIERO QUE TENGA EL ANCHO X -->
                <div class="btn-group gap-contenedor-buttons-footer" role="group">
                    <button class="btn btn-default" type="submit">Registrar usuario</button>
                </div>
 
            </form>
        </div>
    </article>
</div>

Podemos observar que tenemos esta estructura:

<!-- EL CONTENEDOR DE ABAJO TIENE UN ANCHO X-->
<div id="contenedor">
    <article>
        <div>
            <form>
                <div>
                </div>
 
                <!-- EL CONTENEDOR DE ABAJO QUIERO QUE TENGA EL ANCHO X -->
                <div class="btn-group gap-contenedor-buttons-footer" role="group">
                    <button class="btn btn-default" type="submit">Registrar usuario</button>
                </div>
 
            </form>
        </div>
    </article>
</div>

El <div id="contenedor"> posee un padding de 1em, y yo quiero que el <div class="btn-group gap-contenedor-buttons-footer" role="group"> no tenga en cuesta este padding y ocupe el mismo ancho que el <div id="contenedor"> Por ahora lo hice forzando el valor de esta forma: style="width: 104.7%;" pero esto es un problema, no siempre funciona, todo depende del tamaño de la ventana del explorador.

Yo necesito que el CSS tome el valor del ancho del <div id="contenedor"> y lo cargue al <div class="btn-group gap-contenedor-buttons-footer" role="group">

Si me ayudan se los agradecería.