To find out where everything goes in Cassiopeia, I pulled the HTML from Cassiopeia's index.php and styled it a bit.

Cassiopeia Positions

body

header (wrapper)

topbar

below-top

grid-child container for brand/logo & description

brand/logo

site-description

menu

site-grid (wrapper)

banner

top-a

top-b

sidebar-left

container-component

breadcrumbs

main-top

message

actual content component

main-bottom

sidebar-right

bottom-a

bottom-b

footer (wrapper)

footer

back-to-top & debug

Some notes...

Sticky menu

If you choose to make the menu sticky, it will make the whole "header" section sticky...

Sidebar width

If you want to change the width of a sidebar, you will have to tinker with the CSS for the "site-grid" section. It is initially styled as a CSS grid, like this:

.site-grid {
    display: grid;
    grid-template-areas:
        ". banner banner banner banner ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". comp comp comp comp ."
        ". side-r side-r side-r side-r ."
        ". side-l side-l side-l side-l ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b .";
    grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end];
    grid-gap: 0 1em;
}

And on larger screens, like this:

@media (min-width: 992px)
.site-grid {
    grid-template-areas:
        ". banner banner banner banner ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". side-l comp comp side-r ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b .";
}

Making the side bars smaller can be done like this:

.site-grid {
	grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 17.875rem) repeat(2, minmax(0, 21.875rem)) minmax(0, 17.875rem) [main-end] minmax(0, 1fr) [full-end];
}

or whatever width you prefer. The total max-width determines the width of the content area - in this example, I kept the same total in rems.