6

I am creating documentation using the Read the Docs theme for Sphinx documentation. I am trying to center the entire webpage - both the body and the left navigation bar, such that if the width of the window increases, the margin on both the left and the right sides increases equally. Currently, all of the content is fixed to the left side of the screen.

I have done some experimenting with the css style sheet and found that by replacing all instances of "margin:0" with "margin:0 auto", the body shifts to center justifies. however, the navigation bar is still locked to the left side of the screen. Any suggestions on how to do this? I have very little experience with html and css. I can upload files if necessary.

Adam Turner
  • 61
  • 1
  • Welcome to _StackOverflow_! Here, you can learn [How to Ask](http://stackoverflow.com/help/how-to-ask) properly before you do so. When asking a question, be sure you are [on topic](http://stackoverflow.com/help/on-topic) and always try to provide a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) when possible. This way, it's more likely volunteers on SO can help you. – lealceldeiro Mar 08 '17 at 16:07

1 Answers1

0

This seems to work for me.

@media screen and (min-width: 1100px) {
    .wy-nav-side,
    .wy-grid-for-nav {
        margin-left: calc(((100vw - 1100px) / 2));
    }
    .wy-nav-content-wrap {
        background: none;
    }
    .wy-body-for-nav {
        background: rgba(0, 0, 0, 0.05);
    }
}
Bharathy
  • 1
  • 1