Trying to tidy up a nice <ul> with icons on the side but gets messy

[sebaba001]

Hi guys. I am going through the responsive web design course and doing the final projects. I can never fully grasp flex boxes it seems, no matter how much I repeat the exercises or google around. Here is my code, I am trying to emulate a bit the ‘Build a Landing Page’ exercise. I already passed by the way, just trying to make it look pretty:

CODE IMAGE:

It’s strange to me because all the boxes have the same damn properties (and the % of the image size really does not affect this) but the List’s start drifting to the right more and more for each one I create. Btw it looked weird when I had a single div, when I created a second div grouping up the li and the p it got the right order I wanted them to be (image to the left, title on top, paragraph below it).

I will post the image of how it looks on the comments. This beautiful forum doesn’t allow me to copy paste the code (says I can’t post multiple links and/or images) neither does it allow me to post two pictures.

Challenge: Build a Product Landing Page

Anyways, any help to this newbie I would highly appreciate. CSS seems tougher to me than javascript and python and other languages… any tips on general understanding of CSS also are appreciated. Thanks

[sebaba001]

Image of how it looks. Notice how every new list with it’s paragraph (in this case named as “insideBox1” or simply the second div) shifts away to the right, even though they all share the same code. The answer is not on img width or height, that doesn’t affect much the other box, I chose those sizes simply to match the different icons.

[sebaba001]

And this is kinda how I want it to look.

[Sylvant]

the way i see it, you want to put in every <li> element, its whole content, including image, heading and description paragraph. A grid can be good display option to make the li elements content take the shape you wish(image on the side, heading and paragraph beneath it on the other side).

[sebaba001]

Awesome! Thanks a lot… I set the boxes to grid… picture start at column 1… lists and paragraph box at column 2… that’s it. Just had to tidy up with margin and padding but that was because of picture size. Awesome.