Technical documentation page paragraph spacing

Hello!

I am trying to create space between the paragraph text so it doesn’t stretch from the end of the nav bar to the end of the page. When I type this request on google all i see are answers about line spacing and indenting but nothing about creating more space between the opposing horizontal ends of the paragraph. Any help means the most!

To be honest, I’m not exactly sure what your question means? I only see one paragraph on this page. Where are you trying to create space?

sorry if my wording is weird. I’m trying to create blank white space on the outside of the left/right side of the paragraph and have the text in the center. originally. the paragraph was taking up the entirety of the width of the white space to the right of the navbar. does that help?

or create space around the paragraph if that makes it clearer

Thanks, now I think I understand. I’ll offer a few suggestions. First, I would not use CSS width on that content, I would use max-width, and set it in em units (like 45em). Doing it this way allows the content to take up all the horizontal space available until it reaches the max width. This is a good thing.

Then, if you really want to center the content you could use auto side margins:

margin-right: auto;

But I would not do that. I think it looks weird to have the content centered like that when you have a menu bar going done the left side of the page. Of course, this is just my own opinion. Now you could center the entire thing if you like.

Also, in a somewhat unrelated note, I think you should look into using flexbox for positioning the nav and main instead of trying to float things. Nobody uses float anymore, it is outdated and often causes additional problems.

thanks for the heads up! I tried to convert everything to flex but can’t seem to position the paragraph + header the way they were before. can you possibly let me know where I’m going wrong whenever you have a moment. Really appreciate your help and tips

You need to set display: flex on the <body>.

1 Like