Issue with centering main with side documentation bar

[michaelnicol]

Hello,

I am having another issue with my technical documentation page.

Technical Documentation Page

On my technical documentation page, I have a fixed side navigation bar. To the right I have my main, which is held in place with a 405 pixel margin. My main has a max-width of 1280 pixels because I don’t want to strain the user by reading across the page. If the text were 100% of the width, the paragraphs would be stretched onto one line on 4k displays (The display I am using).

The issue is that this leaves a massive gap to the right of the main, which does not look good.

I am wondering if there is anyway I can center my main, while still keeping the 405 pixel minimum margin to the left to prevent the nav overlap?

This can relate back to a previous post on keeping my navbar in the document flow (link).

The issue is that my navigation bar is out of the normal flow of the document. The main will go underneath the navigation bar if not for the margin. However, If I try to flex my body into a row and put the items in the center;

The navigation bar is still moved to overlap the main content.

I can’t use margin: 0 auto; because the auto part does not allow for custom left or right margins.

TD:LR; Need help to center the main in the area that the navbar does not cover while preventing overlap.

Any ideas?

[bbsmooth]

Personally, I think it is fine to have the empty space to the right of the main content as you stretch the browser wider. You’ve got to stretch the browser pretty wide to see that extra space (most people are never going to see it). If you do want to center the content then I don’t think main is the element you should be targeting, but rather section. Give it a max-width (preferably in ems) and then use auto side margins to center it.

The bigger issue you have here is that your page isn’t responsive as I narrow my browser. You are using a desktop-first approach to styling here, which you can probably get away with for such a simple design, but in general I would suggest you use a narrow-first (or mobile-first if you prefer that term) approach.

[michaelnicol]

You’re right, the best part is no part so just leaving the extra space alone would be better. I corrected the responsiveness and will need to use more media to further flex the navigation bar on small screens for mobile.