Create a Footer Block in css - html

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'}. {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;
}

Answer 2

Based on my understanding of the above, you can reduce a lot and get the footer from the image. All you really need is below:
CSS
footer {
padding: 1.2em 0;
background: #000;
font-family: "Fjalla One", Verdana, Geneva, sans-serif;
font-size: 0.95em;
text-transform: uppercase;
text-align:center;
/* you probably need to add some extra styles here */
}
HTML
<div class="footer">
#COPYRIGHT#&COPY;{var name='copyright_year'} {var name='sitename'}. {var name='footer_menu'}
</div>
This would place something like the image at the bottom of your content.

Answer 3

The css :
#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;
//add
text-align: center;
display: block;
width: 100%;
clear: both; //because you have some float on the previous "row"
}
And add :
#footer-row1 a{ //for you link
font-family: "Fjalla One", Verdana, Geneva, sans-serif;
font-size: 0.95em;
text-transform: uppercase;
color: #3399FF; //blue for example
}
#footer-previousRow{ //the previous row with list items
display: block;
width: 100%;
height: 260px;
}
#footer-previousRow ul.listItem{
list-style: none;
list-style-type: none;
min-height: 36px;
margin: 0;
overflow: hidden;
display: block;
float: right;
}
ul.listItem li{
color: #CCCCCC;
}
And your html code for the previousRow :
<div class="footer-previousRow">
<ul class="listItem">
<li>Contact</li>
<li>Social</li>
</ul>
</div>
<div id="footer-row1"> // your actual code
<div id="footer-bg">
<div id="footer" class="container_24">
<div class="copyright">
#COPYRIGHT#&COPY;{var name='copyright_year'} {var name='sitename'}. {var name='footer_menu'}
</div>
</div>
</div>
</div>