CSS Flex Layout seems...disorganized and could be done better.

For a MA assignment, I have to recreate a portfolio layout using CSS Flex now (some may remember I had to do this with Float before...yikes). Layout ref is attached. Looking for someone to review my CSS here to see if there is some easier way I'm missing to organize my flex layout. I'm trying to get the header aligned with main content on the left edge so that My Name at the top starts at the same alignment that About Me does. Also, just general flex tips and brief code review would be nice. Looking for peoples tips to show me what I might be missing. Here's the codepen: https://codepen.io/spit-ball/pen/mdLXjMx