content overlapping when resizing browser

Question

I am very new to coding and literally have no idea how to fix this and would really appreciate some help.

I'm creating a virtual cv; have some content that keeps on overlapping when the browser is resized and nothing I try will stop it...

I want the content to resize as the broswer resizes; if possible. But I do not want the content to overlap..

my work so far is hosted on codepen; here's the link...

this is my work http://codepen.io/JRMatthews/pen/RKWjLa

<div class='title'> <p>Jordan Matthews</p> </div>

That title is seemingly overlapping the writing that is below it; but I want it to stay above and not overlap; just like when the browser is full size...

please help

*****EDIT****

I also would really appreciate finding out the easiest way to centre align all of my content- as I can't seem to work out how to do it.

but the biggest issue is with the overlapping.

I can add screenshots if needed but the link to my pen on CodePen has been inserted.

PLEASE HELP. THANKS.

Answer 1

Try to remove absolute positioning from your elements, there are plenty ways of positioning elements exactly where you want them to be, without using position absolute.

You can use text-align or padding and margin to change text position.

Remove all occurences of position: absolute from your CSS code.