Как правильно сделать footer?

Question

[eeennyg]

Всем привет! Столкнулся с проблемой, что footer не выделяется как блок. У меня есть div в котором происходит скрол и получается вот так
Помогите пожалуйста решить проблему
Footer HTML

<footer>
			<div class="divul" >
				<ul class="ulfooter">
					<li>
						<a href="">
							<p><img class="picture2" src="static/img/settings.png" alt=""></p>
						</a>
					</li>
					<li>
						<a href="">
							<p><img class="picture2" src="static/img/favorite.png" alt=""></p>
						</a>
					</li>
					<li>
						<a href="">
							<p><img class="picture2" src="static/img/discount.png" alt=""></p>
						</a>
					</li>
					<li>
						<a href="">
							<p><img class="picture2" src="static/img/planning.png" alt=""></p>
						</a>
					</li>
				</ul>
			</div>
		
	</footer>

Footer CSS

.divul{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;		
}
.ulfooter li a {
	display: table-cell;
	vertical-align: bottom;
}
.ulfooter li a p {
	margin-top: 10px;
	margin-bottom: 10px;
}

Answer 1

[Антон Шаманов]

1. display: table-cell подразумевает display: table у родителя
2. "a p" это какое-то извращение, почему бы просто не сделать a {display: block; margin: 0 10px; } ?

Answer 2

[psvghg]

<footer>
	<div class="cont">
		<a href="">
			<img src="" alt="">
		</a>
		<a href="">
			<img src="" alt="">
		</a><a href="">
			<img src="" alt="">
		</a><a href="">
			<img src="" alt="">
		</a>
		<a href="">
			<img src="" alt="">
		</a>
	</div>
</footer>

.cont {
	display: flex;
}

Почитай о flex