Working on a small tech challenge and implementing flexbox. Despite setting display: flex; on the parent div, using justify-content with space-evenly in the same CSS property doesn't seem to have any effect.
CSS snippet:
.relatedFlex
{
display: flex;
background-color: #fff;
justify-content: space-between;
}
HTML portion:
<section class="relatedPost">
<div class="wrapper">
<h2>Related post:</h2>
<div class="relatedFlex">
<div class="relatedSectionOne">
<img class="photoWidth" src="assets/image-2.jpg" alt="Looking Stoic">
<div>
<p>MAR 9, 2019</p>
<h3>Juno Tech Test</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
<button>Read More</button>
</div>
</div>
<div class="relatedSectionTwo">
<img class="photoWidth" src="assets/image-3.jpg" alt="Hands On Learning">
<div>
<p>MAR 15, 2019</p>
<h3>Juno Tech Test</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
<button>Read More</button>
</div>
</div>
<div class="relatedSectionThree">
<img class="photoWidth" src="assets/image-3.jpg" alt="Hands On Learning">
<div>
<p>MAR 15, 2019</p>
<h3>Juno Tech Test</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
<button>Read More</button>
</div>
</div>
</div>
</div>
</section>