Increase the width used by gitbook - Solved


Gitbook html output is really neat but leave 30-40% of the screen real estate as white background... Is there a way to decrease this amount of side margins, ie increase the width dedicated to content?


1 Like

I don't know about if there is a way to do it using the bookdown::gitbook but you could likely do it by adding some custom css to your document.

You can add custom css by including it in the YAML like this:

    css: styles.css

You can then add something like this to your styles.css file:

.page-inner {
  width: 95%;

I am not sure the class of the gitbook output for the portion of your document you want to make wider. But .page-inner is the name of the div class that is used in the bookdown book so that is a slight chance they are the same. You can find the exact class of this div using the developer tools for your browser.

1 Like


Thank you for you reply. I have tested inserting the suggested css in my own styles.css file... It had no visible effect.
Looking at the structure of gitbook html output, the div of page-inner is within a div of class page_wrapper. Putting the suggested css in a .page_wrapper section of the styles.css had also no effect.

From that shotgun approach, you can probably conclude that I am not a web developer :smiley:


It looks like some classes higher in the hierarchy constrain the default maximum width to 800px for the "main" content of the book.

The following seems to work... I shall see if adjustments are needed. Thanks @tbradley for point me towards the right path.

.book .book-body .page-wrapper .page-inner {
  max-width: 90%;

If your question's been answered, would you mind choosing a solution properly? It helps other people see which questions still need help, or find solutions if they have similar problems. There is a mechanism for that, that is better that editing the title. Here’s how to do it:

1 Like

Thanks for your message. I knew it was possible but forgot how to mark my post as solved.

1 Like