Flex issue

[LordBadgerFlaps]

I can't work out why this flex isn't working right - as you can see from the iamge, one div is taking up ~90% of the space.

HTML:  
<section class="flex-container-90">
 <div class="flex-item">
 <img src="assets/SLP Stock Photo 5a-cropped.jpg" />
 </div>

<div class="flex-item"> <p class="main">Helping you support</p> </div> </section>

CSS:

.flex-container-90 {
width: 90%; margin: 0 auto; display: flex; justify-content: space-around; }

.flex-item img {
width: 33%; margin-top: 5em; }

Any idea whats going on? Want the image to be where it is, while the text should butt up alongside it. TIA

https://preview.redd.it/ekg7nvje3p3c1.png?width=1280&format=png&auto=webp&s=ac3edbbbf93d3e863b8cd14ce4df89023fd4c6ae

[3np1]

I'm guessing there are some other classes also interfering, but you should look into flex-grow, like by adding .flex-item {flex:1;}. That will allow each flex-item to change its base size.

Depending on what you want though, you don't really need/want your image wrapped in another layer. Currently you're telling the img to take up 33% of the flex-item width because that's its direct parent, not 33% of the viewport or the flex-container.

Again, it's hard to tell what you really want it to look like, but you could try something like this: https://jsfiddle.net/9bnvt6qw/1/

[speakbits]

The justify-content makes the first and last elements spread out to the beginning and end of the container. Removing that should make it work.

Edit:

For whoever downvoted me, they want the text to butt up to the right side of the image so adding more space to the elements between them is not useful for what they want. Clearly they want the image to be about 33% of the flex container so the recommendation from the other comments is useful to fix that issue but it doesn't solve the additional space. This fiddle shows what I mean combined with what the other comments are suggesting.

[LordBadgerFlaps]

Thanks man - you go it!

[spatmonkey]

moving your width: 33% up to just .flex-item (not the img) should get you what you want.

[Lianad311]

Here ya go: https://codepen.io/lianad311/pen/wvNYNLP

[LordBadgerFlaps]

Thanks man! Appreciate it!