Why do my components jump

Question

I had some html code with css. I closed it in the night looking a certain way, in the morning when i opened the code again the actual components had moved, for e.g. the border didnt encompass the contents anymore but had jumped up to close at the top of the page.
You can see basic example here, the border instead of going around the text jumps up to the top and makes a very thin, short border, while still keeping the 70% width rule.
Please help?
https://code.sololearn.com/WM9WVLii5755/?ref=app

You can see the whole problem here:
https://code.sololearn.com/WJoRS4ZC92uR/#html
Click run and you'll see the border goes to the top instead of around the content. It was around and then suddenly jumped.
Thanks!

Answer 1

Ok finally I found the problem , float is causing the problem ,either clear each of them or just add display:grid or display:flex in body , now i don't know how it all works ,since i am new to css but flex and grid are used nowdays because of the problems that arises from float as I have been reading !!

Answer 2

I didn't really understood the problem from the code you provided , everything looks correct in it if I am not wrong!

Answer 3

Exactly, I didnt change the code overnight, it just jumped I really dont understand why. This happened also in the middle of working with other components like social media button floats which were in the right place and suddenly jumped.
I tried looking for answers on the web but could not find, what could cause this?

Answer 4

Can't help without looking into code myself ,or atleast a part of the code that you think is causing the problem , because I really Don't understand what you mean by jumping of the elements
Or maybe wait for someone else to help!

Answer 5

Idk what to tell you, I copied what code I had. I dont understand it either!

Answer 6

What did you meant by border instead of going around text jumps up to the top and makes a very think short border ,while still keeping 70% width rule, isn't that how it should be according to the style you have provided it ?

Answer 7

The text and link content should be inside of it, not under it. Basically the height of the border becomes approx 3px..
What I wanted was a border for the whole page, whatever the content in it.
Like in the page
https://brooklynanimalaction.org/

Answer 8

You can see the whole problem here:
https://code.sololearn.com/WJoRS4ZC92uR/#html
Click run and you'll see the border goes to the top instead of around the content. It was around and then suddenly jumped.
Thanks!

Answer 9

Thanks ill definitely erase the floats. It was helping me arrange the contents and the border was all fine at first, so it was comfortable.
Thanks you
If you're new to css how do you know so much? :)