Why .widget-area is outside of .site-content in Underscores starter theme?
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).