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:

1 Like

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

1 Like

Weird, does not pad for me, Chrome 95.

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