Technical Doc Page - Help Needed

Hello everybody!

I am working on the layout / styling of my Technical Doc page and I am having an issue with the following:

I have a fixed header on the left side and I am trying to use flexbox to layout the main content, but I can’t figure out a way to position my container to the right of the header to keep the info from being covered by said header.

Project below:

I have tried using z-index, positioning tags, and percentages to get the content moved over, but so far I have struck out. Any help at all will be greatly appreciated.

Many thanks!

  • Darwin

Two remarks:

  1. If your navbar has fixed width of 290px, then your main section isn’t 75% but calc(100% - 290px)
  2. In order to introduce margin from the left side of main you either need to take it “out of flow” by giving it position: relative and adjusting it’s left property accordingly OR to add margin-left to it.
1 Like

Thanks for the tips and the link! Much appreciated!