Question: I am using the following CSS to centre the text on the page but it seems to be creating a large CLS (Cumulative Layout Shift), is there a more efficient way to centre the text?

```
    @media only screen and (min-width: 1000px) {
        .page {
            width: 1000px;
            margin: 0 auto;
            font-size: 1.0em;
            line-height: 1.6em;
            font-family: Arial, sans-serif;
            word-wrap: break-word;
        }
    }

    @media only screen and (max-width: 999px) {
        .page {
            margin: 0 auto;
            font-size: 1.0em;
            line-height: 1.6em;
            font-family: Arial, sans-serif;
            word-wrap: break-word;
        }
    }

```

The CLS issue only occurs in the Desktop version and not the Mobile version which makes me think it is the `width` option.

Answer: 
It turns out the cause of Cumulative Layout Shift was caused by an image incorrectly sized with the wrong width, I said 700 when the image was actually 702. Strangely, the error was being reported in the wrong place, the error was being reported in another div rather than where the image was.

If you are looking for the cause of CLS, look at the image sizings. It wasn't caused by the style width css. The Mobile version worked because I sized that correctly.
You don't have a defined `width`, so the default setting `auto` applies to width, which is 100%. Centering a 100% wide element (with `margin: 0 auto`) in a parent element makes no sense: It takes the whole width of the parent. So you *need* to define a `width` for your mobile version.