CSS help: margin/border around content


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

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! :slight_smile:


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


Which part doesn’t work? If I add your css code to codepen I see padding:
Screenshot from 2021-11-17 13-12-42

1 Like

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

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


I tried with a POC here: https://github.com/Ron-Lavi/foreman-documentation/pull/1

1 Like

Weird, does not pad for me, Chrome 95.

Snímek obrazovky 2021-11-18 v 10.48.55

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.

This is my edited codepen, still no padding?:

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

1 Like