[SOLVED] ]Product Landing Page challenge query

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.

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;
1 Like

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.

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*/
1 Like

Thanks for your contribution. Problem solved.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.