Answer 1

Yahya 11xx
I think you need those social media links at the bottom of header.

In your code, the body element is a flex-box(set by display: flex). But the default content flow direction is row i.e. horizontal. That's why the header element and social media icons in your code are aligned horizontally.

To achieve what you want just add the flex-flow property to the body element like this:
flex-flow: column nowrap;
(Here, nowrap means do not wrap the elements if they exceed the parent element.)

Hope that helps.!