Custom CSS to Change Bookdown Page Width

Question

At the risk of getting a couple of down votes, I have to ask this after spending a few hours this afternoon trying to unravel the css of the bookdown html document that I am working on. For the life of me I just cannot figure out the selectors to use to increase the max-width of the main text area of the bookdown document. I am working with some content that would really benefit from using more of my large monitors.

My latest attempt to get the specificity that I need is a custom css file that contains:

.book .book-body.fixed .body-inner .page-wrapper .page-inner .normal .section .level1 .unnumbered {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

I have tried numerous combinations of selectors and I just can't get that max-width to budge from the 800px default.

For testing purposes, here is an example bookdown document.

Answer 1

Try this:

.book .book-body .page-wrapper .page-inner {
  max-width: 1200px !important;
}