[Theme- Mystile] How to add a full-width section/div before footer?

Hello guys,

Just working with Mystile theme, here’s the link of the production site: RX Holistics.

Trying to add a full-width section just before the footer widgets area. Made the div full-width (doubtful of responsiveness), while having trouble making the contents of the div to align with body contents/margins.

Here’s the code/css:

<div id="before_footer">
This is new footer area for Blog and social icons.
</div>

CSS:

#before_footer {
    background: #8bc73c;
    padding: 0 3.631em;
    margin: 0 -3.631em;
}

Thanks in advance for your help.