Проблемы с процентом CSS

Question

У меня есть изображение нижнего колонтитула, которое отображается в нижнем колонтитуле. Изображение нижнего колонтитула в основном черное, поэтому я хочу, чтобы div в правой и левой области нижнего колонтитула был черным и простирался до края страницы. Я не могу этого сделать. Буду признателен за любую помощь. Ниже мой CSS код, а затем связанный HTML-код: CSS:

body{ 
width: 1196px; 
    margin-top: 2px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    font-family: Verdana, Geneva, sans-serif; 
} 

.footer { 
    width:1196px; 
    float: left; 
    height: 572px; 
} 

HTML:

<div class="footer"><img src="images/footer.jpg" width="1196" height="572"/></div> 

Answer 1

Одним из способов является удаление фиксированного width от body и давая width:100% к footer, то вы можете отцентрировать footer img использованием display:block + margin:auto

body { 
 
    margin: 2px auto 0; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
} 
 
.footer { 
 
    max-width: 100%; 
 
    background: black 
 
} 
 
img { 
 
    display: block; 
 
    margin: auto 
 
}

<div class="footer"> 
 
    <img src="//dummyimage.com/1196x572" /> 
 
</div>