White line unexplicable

Design help General
1

Hi guys!

I’m working on a school website that showcase the advantages of pursuing their courses. At some point of the page (triptyque with ecosystem regeneration, human odyssey and business revolution) I have a white line on the whole height. I cannot find the way to stopped this behavior.

Could you help me?

Thanks a lot and cheers from France
Makercab

Capture d’écran 2021-12-06 à 14.11.13
Capture d’écran 2021-12-06 à 14.11.13956×1146 89.3 KB

Here is my site Read-Only: https://preview.webflow.com/preview/landping-page-1ere-phase-olivier?utm_medium=preview_link&utm_source=designer&utm_content=landping-page-1ere-phase-olivier&preview=61082fb24d039aa324d6cf0d86745a8c&workflow=preview

2

Your Container 2 is overlaying. Change its background color to see what I mean.

Also default padding on columns
image
change from 10 to 0

3

Thanks for your answer.

This is what I want : that the green and the purple continues from the two blocks while having white spaces between columns. The solution that I came up with is two have two div in the background and to have a background in the container.

This is my prototype :

Capture d’écran 2021-12-07 à 15.41.53
Capture d’écran 2021-12-07 à 15.41.531794×772 125 KB

4

It is a bit tricky but I think I have the solution.
Adding padding left and right also adds padding to the bottom, even though we don’t want it.

My approach was to use a background colour on all the major DIV’s to see better what is going on.

image
image1920×720 90.9 KB

I use images to show where I changed the settings.

image
image
image
image
image

5

Yay! It did works!

Unfortunetaly there’s now a grey gap between the upper section and the one below, but I add margins to the top and bottom so it looks like the gap was wanted in the first place ^^

Thanks a lot for your help @iDATUS

6

Good to hear.
Please tick the heart and solution to keep the forum tidy.