I partly got it the way I want it but I'm not really sure how


I made a head div element at the top that wraps the location and current weather divs and gave that head wrapper div a property of display: flex;, I thought I could just do justify-content: flex-start for the location and justify-content: flex-end for the current weather but it didn’t really do anything. I got it to work somehow with the height, width and margin properties. Also, now I want the link at the bottom to go in that gap below current weather and it won’t cooperate. I’ve tried all the same height, width and margin properties but it keeps wanting to go to the right of current weather.

That’s because justify-content is for the container (the element you’re setting display: flex on), not the children.

You want to move footer to the middle of the document? Why? You’ll be breaking HTML semantics.

Obviously I’m not gonna give it a footer element anymore and I’ll change the tag. Because the gap under current weather is the perfect place for it and completes the puzzle.

It would be a perfect case for css grid, but with flexbox you could do something like this: https://codepen.io/jenovs/pen/eYBqPag