Nested Flexbox not working properly

1

At device with of 992px, i have main container that holds sidebar and main container put side by side with display flex no problem! But i tried to flex image and its text description side by side in main container, image on left and text on right, but problem is, flex works but image is too small for what ever reason even though i set its width to be 100% of its parent div at 250px, meanwhile jpg of image is about 600 and something pixels in width, justify - content: space between wont work at all between them!

Screenshot_2
Screenshot_2990×475 68.5 KB

Here is code with live preview:

Btw, sorry for so much CSS in media queries, im doing mobile first!

2

There is a lot of CSS! I think you have a lot overkill on your selectors. you don’t need to do a top down to select an element.

I.e:

    #container > main > #photoshop > #photoshop-work1 {
        width: inherit;
    }

is the same as:

    #photoshop-work1 {
        width: inherit;
    }

And inherit isn’t really needed at all.

I also am not seeing #photoshop as a flexbox container

image
image1375×937 90.5 KB

1 Like
3

Ok thanks, i deleted unecessary code and made it more organized and better now. Will report again if i stumble across another problem.

1 Like