CSS help: margin/border around content

[lzap]

Hello,

I am hacking around a new layout for our documentation site. I merged two CSS together:

• default asciidoctor CSS template: https://github.com/asciidoctor/asciidoctor/blob/main/src/stylesheets/asciidoctor.css
• navigation fixed bar CSS: Help with JS needed: Documentation navigation

It works as expected, however, the content (Foreman Documentation header and XXX) has no border/marging/whatever this is called. I am really bad with HTML/CSS as you can see. Can someone help me out with this?

I created a class and I am trying to apply something like:

div.fd-site-root {
  padding: 10%;
  border: 10%;
  margin: 10%;
}

It does not work for some reason. HELP!

https://codepen.io/lzap/pen/abyPbgW

[lzap]

For the record, the full preview of what I am doing:

https://github.com/theforeman/foreman-documentation/pull/857

[MariaAga]

Which part doesn’t work? If I add your css code to codepen I see padding:

[Ron_Lavi]

If you add something like this it should do the work:

body, #toc {
  padding-top: 50px;
}

I tried with a POC here: Add guides navbar by Ron-Lavi · Pull Request #1 · Ron-Lavi/foreman-documentation · GitHub

[lzap]

Weird, does not pad for me, Chrome 95.

[lzap]

Oh sorry, I mean what is wrong is the missing padding from the left side. The text “Foreman Documentation” starts way to the left. I tried everything and it sticks to the left border.

[MariaAga]

This is my edited codepen, still no padding?:
https://codepen.io/mariaagaph/pen/vYJwOdV

[lzap]

I somehow got it working, I am not sure what was wrong really. Thanks for help!

Here is the result: https://github.com/theforeman/foreman-documentation/pull/857