justify-content not creating space between items - html

Question

I am trying to display these images horizontally in a flex box with justify-content: space-around.
It does not work, any ideas?
The only way that I was able to display it in a spaced manner was with padding.
Why doesn't justify-content work?
h3 {
font-weight: lighter;
font-size: 16px;
margin-top: 0;
margin-bottom: 0;
padding: 0 0 10px 0;
font-family: Proxima Nova;
letter-spacing: 1.92px;
color: #FFFFFF;
opacity: 0.7;
}
.flex-container {
flex-direction: column;
display: flex;
width: 100vw;
height: auto;
}
.trusted-by-container {
display: flex;
flex-flow: column;
align-items: center;
top: 781px;
}
<div class="trusted-by-container">
<div class=t itle>
<h3>TRUSTED BY</h3>
</div>
<ul class="trusting-companies-container">
<li class="company-item"><img src="./images/monday.svg" alt="monday" </li>
<li class="company-item"><img src="./images/intel.svg" alt="intel" </li>
<li class="company-item"><img src="./images/johnson.svg" alt="johnson" </li>
<li class="company-item"><img src="./images/handy.svg" alt="handy" </li>
<li class="company-item"><img src="./images/flexport.svg" alt="flexport" </li>
</ul>
</div>

Answer 1

Flex items will take the width of their content, leaving no extra space for keyword alignment properties (such as justify-content) to work.
Create some extra space; add width: 100%. (Also, close your img elements.)
h3 {
font-weight: lighter;
font-size: 16px;
margin-top: 0;
margin-bottom: 0;
padding: 0 0 10px 0;
font-family: Proxima Nova;
letter-spacing: 1.92px;
color: #FFFFFF;
opacity: 0.7;
}
.flex-container {
flex-direction: column;
display: flex;
width: 100vw;
height: auto;
}
.trusted-by-container {
display: flex;
flex-flow: column;
align-items: center;
top: 781px;
}
.trusting-companies-container {
width: 100%; /* new */
display: flex;
justify-content: space-around;
}
<div class="trusted-by-container">
<div class=t itle>
<h3>TRUSTED BY</h3>
</div>
<ul class="trusting-companies-container">
<li class="company-item"><img src="./images/monday.svg" alt="monday"></li>
<li class="company-item"><img src="./images/intel.svg" alt="intel"></li>
<li class="company-item"><img src="./images/johnson.svg" alt="johnson"></li>
<li class="company-item"><img src="./images/handy.svg" alt="handy"></li>
<li class="company-item"><img src="./images/flexport.svg" alt="flexport"></li>
</ul>
</div>

Answer 2

.companies-evenly {
justify-content: space-evenly;
}
.trusting {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
<div class="trusted-by-container">
<div class=title>
<h3>TRUSTED BY</h3>
</div>
<ul class="trusting companies-evenly">
<li class="company-item"><img src="./images/monday.svg" alt="monday" </li>
<li class="company-item"><img src="./images/intel.svg" alt="intel" </li>
<li class="company-item"><img src="./images/johnson.svg" alt="johnson" </li>
<li class="company-item"><img src="./images/handy.svg" alt="handy" </li>
<li class="company-item"><img src="./images/flexport.svg" alt="flexport" </li>
</ul>
</div>