margin: auto center paragraph appears off center-CodePudding

i am working on a simple site and i need to center a paragraph aligned with the header as in the screenshot below -

however, trying all of absolute, flex and margin: auto center (which was what I finally arrived at), different widths, elements (p, div, etc), in browser it theoretically IS centered (equal margins on each side) but appears not to be because of, i think, the way the paragraph is wrapping.

alignment occuring (in both iOS simulator as well as chrome)

is there any solution to this? i dont want to center align the text itself but just the block.

here is my code, i replaced my original code with an example but i maintained as much of the original code that i believe to be relevant as possible.

<html lang="en">
  <head>
    <title>Example</title>
    <base href="/" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://fonts.googleapis.com/css2?family=Space Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
      rel="stylesheet"
    />
    <style>
      html {
        background-color: black;
        font-family: "Space Mono", monospace;
        color: white;
        font-weight: bold;
      }

      body {
        margin: 0;
        font-size: 12px;
      }

      html,
      body {
        height: 100%;
        letter-spacing: 0.864px;
      }
    
      p {
        font-size: 12px;
        padding: 0;
      }
    
      .header-wrapper {
        text-align: center;
      }

      .desc p {
        font-size: 12px;
      }

      .desc-wrapper {
        margin: auto;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <header>
      <div >
        <h1>Example</h1>
      </div>
    </header>
    <article >
      <div  style="text-transform: uppercase">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco.
      </div>
    </article>
  </body>
</html>

thank you so much!

CodePudding user response：

As you mentioned this is caused by the way the paragraph is wrapping.

To solve the spaces at the end of the paragraph I would suggest:

Solution 1:

Adjust the width of .desc-wrapper until it fits the last character. So in the example case you provided a width of 291px would work.

Solution 2: Add text-align: justify; to your .desc-wrapper class, this will justify the text to fit the div's width.

CodePudding user response：

You can set the text-justify of the paragraph to justify. This adds spacing between the words so that each line of the text will span the entire width of the paragraph.