Problem displaying <ul> element inside div - html

Question

I'm creating footer for my website. I encounter problems that seem to be banal, maybe not. Inside the 'footer' element is a list of 'ul', inside them 'li' with links to social media. The Chrome browser does not display these elements, similarly to Opera and Mozilla. Where is the problem? I am running out of ideas.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Lato', 'Josefin Sans', sans-serif;
font-size: 0;
}
.navbar {
font-size: 18px;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
vertical-align: middle;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.main-nav {
list-style-type: none;
display: none;
}
.active {
display: block;
}
.background-image img {
height: 100%;
width: 100%;
}
.container {
display: flex;
height: 250px;
}
.column-left {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.column-center {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.column-right {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.container .column-left {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
h2 {
font-size: 23px;
padding: 15px;
}
p {
font-size: 20px;
padding: 15px;
}
.container .column-center {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
.container .column-right {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
#media screen and (min-width: 600px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}
}
#media screen and (max-width: 599px) {
h2.title {
font-size: 15px;
}
p {
font-size: 13px;
}
}
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/8a84b6b9df.js"></script>
<div>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<img src="img/developer.png" alt="Sebastian Falba" width="50">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
About me
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="background-image">
<img src="img/responsive.jpg" alt="web development">
</div>
<div class="container">
<div class="column-left"><i class="fas fa-keyboard fa-3x"></i>
<h2 class="title">Modern design</h2>
<p class="description">Fantastic Clean Website Designs</p>
</div>
<div class="column-center"><i class="far fa-window-maximize fa-3x"></i>
<h2 class="title">Responsive</h2>
<p class="description">Make your website mobile-friendly</p>
</div>
<div class="column-right"><i class="fas fa-laptop-code fa-3x"></i>
<h2 class="title">Quality code</h2>
<p class="description">Coding best practices are a set of my rules</p>
</div>
</div>
<footer>
<ul>
<li>Footer</li>
</ul>
</footer>

Answer 1

You set the font-size to 0 so the text has no height.
Since the text has no height, the <a> has no height, so the <li> has no height, so the <ul> has no height, to the <footer> has no height, so you can't see it.