How can I align the html output of a Rmd file to the left

Question

when I knit to html a Rmd file the output I visualize on my browser is always centered. How can I justify everything to the left so there is no wasted space ? By wasted space I mean there is space on the left of the TOC that is unused

EDIT I am aware of this thread but I want to keep the TOC, what I really want is equivalent to move everything to the left so the TOC is next to the left-justified

code:

---                                                                        
title: "Example SO"                                                        
output:                                                                    
  html_document:                                                           
    toc: true                                                              
    number_sections: true                                                  
    code_folding: "hide"                                                   
    toc_float:                                                             
      collapse: false                                                      
      smooth_scroll: false                                                 
---                                                                        

```{r setup, echo=FALSE}                                                   
knitr::opts_chunk$set(error = TRUE,                                        
                      echo = TRUE,                                         
                      message = FALSE,                                     
                      comment = "",                                        
                      fig.align = "left"                                   
                      )                                                    
```                                                                        

# H1 Stuff                                                                 

```{r, DT}                                                                 
    DT::datatable(mtcars, rownames = FALSE, options = list(pageLength = 2))
```                                                                        

# H2 More stuff                                                            
Bla 

output:

Answer 1

The reason you are seeing the "centered" behavior is because of CSS, specifically the rule:

div.main-container {
    max-width: 1200px;
}

Which is being imported by something in the kniting/generation process, not sure what.

But Rmd allows you to add your own CSS rules. So you can overwrite the problematic rule with this rule taking advantage of CSS's !important:

div.main-container {
  max-width: 100% !important;
}

In a file named "styles.css" located in the same directory as your Rmd file. Then reference the CSS file in your front-matter (YAML header):

title: "Example SO"                                                        
output:                                                                    
  html_document:                                                           
    toc: true                                                              
    number_sections: true                                                  
    code_folding: "hide"                                                   
    toc_float:                                                             
      collapse: false                                                      
      smooth_scroll: false
    css: styles.css 

You will get a result with the contents shifted all the way to the left edge of the browser.

This is one path to get to your request of "no wasted space", but there are lots of other routes if you really want left-justified but fixed width content.

If you want to "soak up the space between the TOC table and the content block you could add this to 'style.css'

.tocify {
  max-width: 100% !important;
}
.toc-content {
  padding-left: 10px !important;
}