What to do if justify content space between doesn't work - html

Question

When I try to use justify-content: space-between, it won't work, and I'm assuming that it may be because I don't have space left for this to work. What can I do instead of this?
This is what happens:
However I want it to look like this:
HTML:
<div class = "container">
<main role = "main">
<div class = "group">
<img src = "izonebg.jpg" alt = "group" class = "groupbg">
</div>
<div class = "content-wrapper content-flex">
<div class = "about">
<p id = "aboutiz">ABOUT</p>
</div>
<div class = "info">
<p id = "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida metus fermentum pulvinar eleifend. Aenean condimentum, sapien dapibus interdum porttitor, arcu eros congue enim, sed fermentum erat urna non mi. Duis sed volutpat ex. Vestibulum sit amet fringilla purus. Vivamus ut ipsum sed diam finibus sollicitudin ac lacinia velit. Pellentesque ultrices odio non ante suscipit, nec ullamcorper nulla interdum. Morbi facilisis cursus pharetra. Fusce finibus interdum ligula. Aenean ac sodales velit, eget ullamcorper ante. Duis metus elit, elementum in sollicitudin non, fringilla eu enim. Quisque pharetra orci in odio efficitur, sit amet lacinia quam imperdiet. In tempor pellentesque eros vel semper. Nam neque nibh, posuere eu euismod a, elementum vitae dolor.</p>
</div>
</div>
</main>
</div>
CSS:
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 100%;
}
.groupbg{
width: 100%;
top: 0;
left: 0;
}
#aboutiz{
font-family: Kiona;
font-size: 4em;
font-weight: 500;
}
.content-wrapper{
width: 85%;
margin: 0 auto;
}
.content-flex{
display: flex;
justify-content: space-between;
}
#about-content{
font-family: Acid;
font-size: 1.75em;
}

Answer 1

<div class="section-wrap"> <!-- flex container -->
<div class="heading"><!-- flex item -->
<span class="head">about</span></div>
<div class="description-wrapper"><!-- flex item -->
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida metus fermentum pulvinar eleifend. Aenean condimentum, sapien dapibus interdum porttitor, arcu eros congue enim, sed fermentum erat urna non mi. Duis sed volutpat ex. Vestibulum sit amet fringilla purus. Vivamus ut ipsum sed diam finibus sollicitudin ac lacinia velit. Pellentesque ultrices odio non ante suscipit, nec ullamcorper nulla interdum. Morbi facilisis cursus pharetra. Fusce finibus interdum ligula. Aenean ac sodales velit, eget ullamcorper ante. Duis metus elit, elementum in sollicitudin non, fringilla eu enim. Quisque pharetra orci in odio efficitur, sit amet lacinia quam imperdiet. In tempor pellentesque eros vel semper. Nam neque nibh, posuere eu euismod a, elementum vitae dolor.</p>
</div>
</div>
.section-wrap {
display: flex;
justify-content: space-between;
width: 550px;/* try to reduce a flex width container,
see what happens, flex container need some space sometimes */
}
.heading {
width: 100px;
background: orange;
}
.description-wrapper {
background: black;
color: white;
}
.content {
width: 400px;
}

Answer 2

There was extra margins applying to the About and the content. Hence the difference. Please check the below example where I have removed extra margins.
.container{
width: 100%;
}
.groupbg{
width: 100%;
top: 0;
left: 0;
}
#aboutiz{
font-family: Kiona;
font-size: 4em;
font-weight: 500;
margin: 0;
padding-right: 10px;
}
.content-wrapper{
width: 85%;
margin: 0 auto;
}
.content-flex{
display: flex;
justify-content: space-between;
}
#about-content{
font-family: Acid;
font-size: 1.75em;
margin: 0;
}
<div class = "container">
<main role = "main">
<div class = "group">
<img src = "izonebg.jpg" alt = "group" class = "groupbg">
</div>
<div class = "content-wrapper content-flex">
<div class = "about">
<p id = "aboutiz">ABOUT</p>
</div>
<div class = "info">
<p id = "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida metus fermentum pulvinar eleifend. Aenean condimentum, sapien dapibus interdum porttitor, arcu eros congue enim, sed fermentum erat urna non mi. Duis sed volutpat ex. Vestibulum sit amet fringilla purus. Vivamus ut ipsum sed diam finibus sollicitudin ac lacinia velit. Pellentesque ultrices odio non ante suscipit, nec ullamcorper nulla interdum. Morbi facilisis cursus pharetra. Fusce finibus interdum ligula. Aenean ac sodales velit, eget ullamcorper ante. Duis metus elit, elementum in sollicitudin non, fringilla eu enim. Quisque pharetra orci in odio efficitur, sit amet lacinia quam imperdiet. In tempor pellentesque eros vel semper. Nam neque nibh, posuere eu euismod a, elementum vitae dolor.</p>
</div>
</div>
</main>
</div>

Answer 3

Using CSS grid would be better to use and set gutters for the desired gaps.
The main structure of the page should be consistent between pages, flexbox could cause gaps and widths to change page to page based on its content and CSS grid can help with that.
Try to only use Flexbox for smaller elements like a collection of buttons or pills together and CSS grid for Structure.

Answer 4

justify-content: space-between; is nt working because, there is no space between about and content. Make them display: flex and set flex-grow to 1 and adds a flex-basis: 0. These two properties makes the div to grow from a minimum value of 0%. Ths will make both of the element to consume 50% of container width. And make the UI look like the requirement.
body {
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container {
width: 100%;
}
.groupbg {
width: 100%;
top: 0;
left: 0;
}
.about, .info {
display: flex;
flex: 1;
}
#aboutiz {
font-family: Kiona;
font-size: 4em;
font-weight: 500;
}
.content-wrapper {
width: 85%;
margin: 0 auto;
}
.content-flex {
display: flex;
justify-content: space-between;
}
#about-content {
font-family: Acid;
font-size: 1.75em;
}
<div class="container">
<main role="main">
<div class="group">
<img src="izonebg.jpg" alt="group" class="groupbg">
</div>
<div class="content-wrapper content-flex">
<div class="about">
<p id="aboutiz">ABOUT</p>
</div>
<div class="info">
<p id="about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida metus fermentum
pulvinar eleifend. Aenean condimentum, sapien dapibus interdum porttitor, arcu eros congue enim, sed
fermentum erat urna non mi. Duis sed volutpat ex. Vestibulum sit amet fringilla purus. Vivamus ut ipsum sed
diam finibus sollicitudin ac lacinia velit. Pellentesque ultrices odio non ante suscipit, nec ullamcorper
nulla interdum. Morbi facilisis cursus pharetra. Fusce finibus interdum ligula. Aenean ac sodales velit,
eget ullamcorper ante. Duis metus elit, elementum in sollicitudin non, fringilla eu enim. Quisque pharetra
orci in odio efficitur, sit amet lacinia quam imperdiet. In tempor pellentesque eros vel semper. Nam neque
nibh, posuere eu euismod a, elementum vitae dolor.</p>
</div>
</div>
</main>
</div>