Unorder list not available in my website's footer? - html

Question

I'm creating a website and wanted to put the contact info in the footer. I created the footer using several nested divs: a footer div --> footer-container div --> footer-left div and footer-right div (using display: flex i put them side by side with each other). The footer-left div contains a ul (unordered list) of external links; the footer-right div contains social media icons. I've included the code below:
.footer {
height: 150px;
width: 100vw;
background-color: #7D594F;
}
.footer-container {
display: block;
justify-content: space-between;
align-items: center;
}
.footer-left {
border: 2px solid red;
}
.footer-left ul {
display: flex;
justify-content: space-between;
align-items: center;
list-style-type: none;
border: 2px solid blue;
}
.footer-left ul li {
color: #ffffff;
font-family: montserrat, sans-serif;
text-shadow: none;
text-align: center;
margin: 0px;
width: 150px;
border: 2px solid green;
}
.footer-right {
display: flex;
justify-content: center;
align-items: center;
}
/*to scale down the icons, the #facebook should always be 10px bigger than the #instagram*/
#facebook {
height: 40px;
width: 40px;
}
#instagram {
height: 30px;
width: 30px;
}
.footer p {
color: #ffffff;
font-family: montserrat, sans-serif;
font-size: 10px;
text-align: center;
}
<div class="footer">
<div class="footer-container">
<!--Using flex to push both containers on opposite sides of the footer-->
<div class="footer-left">
<ul>
<li>About</li>
<li>Contact</li>
<li>We Are Hiring</li>
<li>Our Financial Services</li>
<li>Our Legal Services</li>
<li>Kangen Water</li>
</ul>
</div>
<div class="footer-right">
<img id="facebook" src="/images/icons/noun_social media icon_2255034.png" alt="Link to Facebook">
<img id="instagram" src="/images/icons/noun_instagram_3350460.png" alt="Link to Instagram">
</div>
</div>
</div>
But the unordered list is not visible. I created bordered around each element to make it easier to visualize:

Answer 1

body {
margin: 0;
}
.footer {
height: 150px;
width: 100vw;
background-color: #7D594F;
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-left {
border: 2px solid red;
}
.footer-left ul {
display: flex;
/*flex-flow: column nowrap;*/
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
border: 2px solid blue;
}
.footer-left ul li {
color: #ffffff;
font-family: montserrat, sans-serif;
text-shadow: none;
text-align: center;
margin: 0px;
padding: .5em 1em;
width: 150px;
border: 2px solid green;
}
.footer-right {
display: flex;
justify-content: around;
align-items: center;
}
/*to scale down the icons, the #facebook should always be 10px bigger than the #instagram*/
#facebook {
height: 40px;
width: 40px;
}
#instagram {
height: 30px;
width: 30px;
}
.footer p {
color: #ffffff;
font-family: montserrat, sans-serif;
font-size: 10px;
text-align: center;
}
<div class="footer">
<div class="footer-container">
<!--Using flex to push both containers on opposite sides of the footer-->
<div class="footer-left">
<ul>
<li>About</li>
<li>Contact</li>
<li>We Are Hiring</li>
<li>Our Financial Services</li>
<li>Our Legal Services</li>
<li>Kangen Water</li>
</ul>
</div>
<div class="footer-right">
<img id="facebook" src="/images/icons/noun_social media icon_2255034.png" alt="Link to Facebook">
<img id="instagram" src="/images/icons/noun_instagram_3350460.png" alt="Link to Instagram">
</div>
</div>
</div>