Re: how to adjust the width of the main menu...
1. There's a simple diagram of the main divs of the Tiki page here: https://themes.tiki.org/Layout+Templates. This page is actually to describe the differences between the layout templates, but there are diagrams of the columns.
There's a page that has information along the lines of what John was saying here: https://themes.tiki.org/How+to+change+the+side+column+widths.
All the themes use the same template files, so the HTML is the same for all of them (maybe with a very few minor exceptions but nothing involving the basic grid).
2. The screen size isn't a factor, especially once you're looking at a laptop or desktop display.
3. There are a few minor differences among browsers, mostly involving form and text styling details. The grid (column) layout works the same in all of them.
There's no comprehensive document that describes all the details of the page. Actually the page itself is the best document, as it's always up to date, etc. You access this by using your browser's Developer Tools. Control + Shift + C in Firefox brings up the DOM Inspector, which you can use to identify the parts of the page and the CSS rules that apply to them. You can download the Firefox Developer Edition (https://developer.mozilla.org/en-US/docs/Tools) or get the Firebug add-on for the standard Firefox browser, if you don't have one of these already.
About your specific situation, the main column content shouldn't have shifted respective to the column itself, by adding the CSS rules John suggested, unless there are other instances of these divs that were also affected by the new rules (or something else coming into play, but again it's hard to say without seeing the page - maybe you could blur the text and images so they aren't recognizable, or something, so the layout could be checked).
-- Gary
;){kind=link}
;){kind=link}