[SOLVED] ]Product Landing Page challenge query

[Arskeliss]

Hello everyone,

I am currently at the Product Landing Page challenge and there is a question I can’t find how to answer.

There is a gap between two div’s: one has an image in it and the second has text.
Now, I would like to know, how to make that gap disappear, to make the webpage look fluent, without gaps in it.

I tried with margin: 0, but tha gap won’t go away.
It is between the HP INVENT Building picture and the text below it.

Here I give you the link on codepen:
Product Landing Page challenge pen

Any advice is helpful.

[ErFy]

Hi.
If you give display: flex; to the div container it will fix the issue.
For example: give a class name to the div container like hp-container then select it like:

.hp-container {
   display: flex;
}

[Arskeliss]

I will use that, thank you. Now, I changed my mind from using ul and just simply using div's instead and mere text and icons.

[ErFy]

ul and div have their own importance for different cases. By the way, you can only set display: flex; on the image with the latest code you wrote.
Your code:

#main-img {
    width: 100%;
    height: auto;
    margin: 30px 0 0 0;
    object-fit: contain;
    display: flex; /* add this line*/
}

[Arskeliss]

Thanks for your contribution. Problem solved.