Webpage contents overlapping in HTML/CSS

Question

I have created a portfolio page to complete my “Responsive Web Design” Certification on Freecodecamp. Unfortunately, almost on every project I have worked on in this section, I have faced an issue which I haven’t yet understood.

I would like to list them here for all of you to explain it a bit as I am stuck despite trying hard.

(i) More often than not, I face contents of webpage I try to design overlapping whenever position of one of its element is set to “fixed”.

(ii) The problem described above happens when the navigation section’s position is set to “fixed”.

(iii) As the size of viewport changes, contents of header and some other parts doesn’t adjust themselves smoothly.
Finally, Here is the codepen link of my personal portfolio page which gets messy as size of viewport decreases.
Contents are still overlapping when viewed on mobile. What changes are required to make it in order??
Kindly suggest the edits so that I can finish this project.
https://code.sololearn.com/W0A246a7A142/?ref=app

Answer 1

I will talk about the text overlapping between welcome section and section following it with article.

Removing height property from welcome section will work as the height of container isn't dependent on height of viewport anymore and rather depends on content.