The .widget-area actually IS inside .site-content.
For anyone wondering why .content-area has a <main> child-element, rather than being the <main> element itself, here is the explanation:
It allows for CSS styling while preserving HTML5 semantics. Namely it allows for easier negative margin management as well as background and other styling (full explanation here).