I need help offsetting the Sidebar via CSS. so it isn't stuck to the left-side of the browser window

[Darryn]

I have edited the global Stylesheet so that our Confluence instance isn't stretching 3000px across our workplace's ultrawide displays.

Here's how it is vanilla (terrible)...

Some simple CSS code in the Global Stylesheet targeting the Page element, centred the page and added a max width:

#page {
min-width: 350px; 
max-width: 1900px; 
margin-left: auto; 
margin-right: auto;}

Now it looks like this!

Great! Except the sidebar... Instead of the sidebar sitting inside the Page element (like normal wiki's - see Wikipedia for a correct example), the sidebar sits in the margin (boo!).

I think the classname acs-side-bar ia-scrollable-section affects the sidebar, meaning it doesn't move because the class Position is absolute?

.acs-side-bar {
position: absolute;
top: 0;
bottom: 40px;
width: 100%;
background-color: #f4f5f7;
}

I believe I need to offset the sidebar so it is relative to the the Page element, but I'm not very good at offsets.

Can someone please help on how I use the global stylesheet to offset the sidebar relative to the page element.