Academic Theme Width Adjustment

Using Themes
1

I want to customize the width of content pages in my academic theme hugo site. The default width (I believe) is defined as the “md” size in this bootstrap file: https://github.com/gcushen/hugo-academic/blob/ae4afde2c0d9d69a862db420de8ba03a9962c386/assets/sass/bootstrap_variables.scss#L10

This is my guess, because all of the max widths for containers end up being 720px by default. I would much prefer it to be the “lg” value of 960px. Unfortunately, there seems to be no way to override bootstrap variables for themes.

I tried to override this with a custom css override to 920px here: https://gitlab.com/princeton-infosec/www/blob/master/assets/css/custom.css#L2

This works for the most part, but it breaks the “100% width” tables. For example, on the https://gitlab.com/princeton-infosec/www/blob/master/content/assignments/_index.md page, this table will not fill the width of the container. Instead, it will still stretch out to the required width of the text, but not to “100% width” of 920px. What’s weird is that the “table” element is the correct width, but not the “thead” or “tbody.”

I’ve fiddled with all the css things I could think of, and I got close with some custom css like this combined with a div wrapping shortcode:

.article-container {
  max-width: 920px !important;
  padding: 0 20px 0 20px;
  margin: 0 auto 0 auto;
}

.full_table {
  display: table;
  width: 100%;
}

.full_table table thead {
  display: table;
  width: 100%;
}

.full_table table tbody {
  display: table;
  width: 100%;
}

Unfortunately, this broke the column alignment between the header and the body. There has to be an easier way to fix this. Any ideas?