Rmarkdown sidebar can float to the left of centered main-content? (for rmdformats only)

Question

I saw some answers for html, but non of them worked for my Rmarkdown.

My goal is to make the sidebar float next to the centered main section while using rmdformats. Or just that sidebar + main are centered.

Requires package rmdformats

With my current files, sidebar remains fixed on the left side, despite the fact that my code should center "content"

.Rmd file:

---
title: "my title"
date: "`r Sys.Date()`"
output:
  rmdformats::readthedown:
    highlight: kate
---

<link rel="stylesheet" href="mystyle.css"> # css tested in yaml also

mystyle.css :

#content {
  margin: 300 auto;
  max-width: 800px;
}

@media (min-width: 1400px) {
  #content {
  width: 1100px;  
  margin: 0 auto;
  }
}

Note: I know that common Rmarkdown mimics a sidebar, next to main.

Answer 1

When screen is small (< 1000px), configuration is close to original. When it gets bigger, (> 1450px) I centered the content horizontally, with the sidebar adjacent to the content (main).

The accompanying effect of the sidebar to the centered main comes from subtracting 300px (sidebar) plus half the content (main) width: 850px/2 (translateX(-725px)), starting from center (left: 50%)

@media screen and (max-width: 1000px){ /*was 768*/
.tablet-hide{
display:none}

#content{
margin-left: 0;
padding: 1em;
}

#content.shift{
position:relative;
min-width:100%;
left:300px;        /*was 75%*/
top:0;
height:100%;
overflow:hidden}

#sidebar {
font-size: 120%;
left: -300px;
width: 300px;
}

#content.shift #sidebar {
font-size: 120%;
left: 0;
width: 300px; /* was  75% */
}
#nav-top {
display: inline-block;
}
#postamble {
left:-300px;
}
#postamble.shift {
font-size: 90%; /* was 110%*/
left: 0;
width: 100%; /* was 75%*/
}
#main .nav-pills {
margin-left: 0px;
}
#main .nav-pills li {
margin-left: 10px !important;
}
#main .nav-pills > li > a {
padding: 2px 8px !important;
margin-right: 0px !important;
}
}

#content {
    max-width: 850px; /* was 900px*/
}

/* new */

@media (min-width: 1450px) {
  #content {
  width: 1150px;
  margin: 0 auto;
  }

  #sidebar {
    position: fixed;
    left: 50%;
    width: 300px;
    transform: translateX(-725px);
  }
}

Based on: Fixed position but relative to container