'margin: auto center paragraph appears off center

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

ideal alignment

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 class="header-wrapper">
        <h1>Example</h1>
      </div>
    </header>
    <article class="desc">
      <div class="desc-wrapper" 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!

htmlcssioswidth


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions