I am seriously in need of help to complete my last HTML and CSS project

I am on my last project in the HTML and CSS and I am trying to make a personal portfolio but the thing have been giving me hell since yesterday and I want to cry out to the wonderful people here.
The section below my hero page is overlapping everything, It’s covering my hero page and even my header when I scroll it. I have tried everything I know and googled all I can and still no answer yet.
I used clip-path on both of the sections and this is the problem When I remove the clip-path on the #welcome-section then everything seems to work fine but it’s not just working with the clip-path and I want to know if there is a way through this.
I have added a position to all of them with a different number of values of Z-Index and still not fixing it…
I will be very happy if anybody can save me from this misery, I can continue my project without clip-path, but I am learning so I don’t run away from problems, Id rather cry out here!..
I included the link to the projects codepen and I am looking forward to getting help here…
THE CODE PEN
Thanks.

Hi, I tried to help you. This is my solution, I hope I was helpful

A Pen by Hans (codepen.io)

@Hann0T … omg! you just saved me, It worked! I don’t know how to thank you for this, I appreciate this from the dept of my heart, Thank you so so much…

1 Like