Center Headers in Footer to Organize it - html

Question

I was able to find an html and css code to start creating my footer.
I was able to make it look a bit the way I want as seen in the following code:
However, I wanna be able to center all three headers and I can't seem to find how...
* {
margin: 0;
padding: 0;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
body {
line-height: 1.5;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.textDecoration {
text-decoration: none;
color: inherit;
}
.container {
max-width: 100%;
margin: 0px;
}
.row {
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
.footer {
background-color: #24262b;
padding: 0px 0;
width: 100%;
}
.footer-col {
width: 25%;
padding: 0 15px;
}
.footer-col h4 {
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: red;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Terms & Conditions</h4>
</div>
<div class="footer-col">
<h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
</div>
</div>
<div class="footer-col">
<div class="social-links">
<h3><img src="https://i.ibb.co/Lp1sB0M/face4.png"></a>
<img src="https://i.ibb.co/XVzFjBR/ig3.png"></a>
<img src="https://i.ibb.co/vVRq5dz/tw2.png"></a>
<img src="https://i.ibb.co/8j8dWcG/yt2.png"></a>
</h3>
</div>
</div>
</div>
</footer>
Any hints you can provide me to achieve this?
What would you recommend for social network icons for the footer?

Answer 1

It makes sense to put all h4's in a single footer-col div together because you want them grouped in the center. So you can do that, then add display: flex; to footer-col and use justify-content: center; to center them. Then you can add a gap to space them out. I also added display: flex; on your social-links to allow them to flex to stay on the same line.
* {
margin: 0;
padding: 0;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
body {
line-height: 1.5;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.social-links {
display: flex;
}
.textDecoration {
text-decoration: none;
color: inherit;
}
.container {
max-width: 100%;
margin: 0px;
}
.row {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
}
.footer {
background-color: #24262b;
padding: 0px 0;
width: 100%;
}
.footer-col {
display: flex;
width: 100%;
justify-content: center;
gap: 2em;
}
.footer-col h4 {
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: red;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Terms & Conditions</h4>
<h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
<h4>Follow Us</h4>
</div>
<div class="social-links"><img src="./img/face4.png">
<img src="./img/ig3.png">
<img src="./img/tw2.png">
<img src="./img/yt2.png">
</div>
</div>
</div>
</footer>
</body>
</html>