在css中创建一个页脚块(Create a Footer Block in css)

在css中创建一个页脚块(Create a Footer Block in css)

我正在为我的网站创建一个页脚块。 我不是css的专家。 我期待在左侧和右侧创建一个带填充的块。

附件是页脚块的示例，我希望创建：

但是，我创建的页脚块跨越整个屏幕。 知道什么可能是错的吗？

这是我的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; }

这是footer.html代码

<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>

谢谢

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

最满意答案

检查这个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; }

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; }