Trying to recreate a portfolio design from Codewell for practice, but struggling to create space between images without them stretching and the text disappearing. Even using display: flex and justify-content: space-between ends up stretching the images.
If you want to see the original portfolio for reference, here's the link:
Below is the code I have so far:
.web-div {
display: flex;
justify-content: space-between;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9292898e898f9c8dbdc8d3ccd3ce">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6 web-div">
<img src="Assets/Spense.png" alt="Spense Image">
<h2>Spence.com <i class="fi fi-rr-arrow-right"></i></h2>
<p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less when and how they'll get paid. Project in collaboration with Codewell.cc</p>
</div>
<div class="col-lg-6 web-div">
<img src="Assets/YelpCamp.png" alt="Yelp Camp">
<h2>YelpCamp.com <i class="fi fi-rr-arrow-right"></i></h2>
<p>Allowing backpack travelers to perfectly plan their trip through an open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favorite in 2021.</p>
</div>
</div>
</div>