Make widget fullwidth above footer

Hello
I made a custom widget called ‘consultation’, and then added in the following custom HTML –

<div id="ctaBoxWrapper">
	<div class="ctaBox">
		<h2>
			Start with a free consultation.
		</h2>
		<p>
			If you are being investigated by police or if you’ve been charged with a criminal or driving offence, don’t face the problem alone. Being accused of an offence is stressful. The prospects of a criminal record or jail sentence can be daunting. Even if you think there is no defence, we may be able to help. To schedule a free initial consultation with one of our Vancouver lawyers, <a href="/contact/">contact us</a> now.
		</p>
		<p>
[av_button label='Connect' link='page,673' link_target='' size='small' position='left' label_display='' icon_select='no' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' av_uid='' custom_class='ctaBtn' admin_preview_bg='']
		</p>
	</div>
</div>

I then placed a color section on each page with no padding and gave it an id of ‘ctaBoxWrapper’. I then added the following css –

/* call to action box above footer ******************************/

#ctaBoxWrapper {
    width: 100% !important;
    max-width:100% !important;
    padding:0 !important;
margin: 0px !important;
}

#ctaBoxWrapper .container {
  width: 100% !important;
  max-width:100% !important;
  padding:0 !important;
}

.ctaBox {
	background: #eb001b !important;
	/* background: url(/images/glassDoor.jpg) no-repeat bottom right; */
	margin: 0px !important;
	padding: 50px !important;
}

.ctaBox h2 {
	color: #fff !important;

}

.ctaBox h3 {
	color: #fff !important;

}

.ctaBox p {
	color: #fff !important;

}

.ctaBox a {
	font-weight: bold;
	color: #fff;
}

.ctaBox a:hover {
	color: #000;
}

/* cta button **********************************/

.ctaBtn {
	margin-top: 20px !important;
}

/* same styling as size small - add the class into the shortcode */

.ctaBtn a {
	background: #eb001b !important;
	color: #fff !important;
	opacity: 1 !important;
}

.ctaBtn a:hover {
	background: #000 !important;
	color: #fff !important;
	opacity: 1 !important;
}

I’d like it to be fullwidth, ie, so that the red is flush to the edge as well as flush to the footer, so also no space between this widget and the footer. I’ve looked at lots of posts but can’t make it work. I’ve put a sample page in the private area. Please advise. Thank you in advance.