Create a Footer Block in css

Question

I am creating a footer block for my website. I am not an expert with css. I am looking to create a block with padding on both left and right side.

Attached is the example of the footer block, I wish to create:

However, the footer block, that I created is spanning over the entire screen. Any idea what could be wrong ?

Here is my css code :

#footer-row1{
    margin-top: 80px;
    padding: 1.2em 0;
    background: #000;
    bottom: 0;
    margin-right: -33px;
    font-family: "Fjalla One", Verdana, Geneva, sans-serif;
    font-size: 0.95em;
    text-transform: uppercase;
}

Here is the footer.html code

<div id="footer-row1">
                    <div id="footer-bg">
                        <div id="footer" class="container_24">
                            <div class="copyright">
                              #COPYRIGHT#&COPY;{var name='copyright_year'} {var name='sitename'}. &nbsp;&nbsp;{var name='footer_menu'}
                          </div>
                        </div>
                    </div>
                </div>

Thanks

Answer 1

check this FIDDLE

 #footer-row1{
    margin-top: 80px;
    padding: 1.2em 0;
    background: #000;
    bottom: 0;
    margin-right: -33px;
    font-family: "Fjalla One", Verdana, Geneva, sans-serif;
    font-size: 0.95em;
    text-transform: uppercase;

}

.copyright{
    text-align: center;
    color: #FFF;
}