I've been having problems with having my pages use 100% width. It works fine on desktop, taking the full page width, but on mobile it gets weird. I am using NextJS, and Material-UI, if it makes any difference. I tried to set width: 100%, but it doesn't change anything.

My CSS is:

global.css:

```
    html,
body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
}

```

\_app.js

```
<Head>
        <title>E-commerce</title>
        <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
                                />
        </Head>

```

This is the body width on mobile. The HTML, body width is the gray part

[![This is the body width on mobile](https://i.stack.imgur.com/nz1cJ.png)](https://i.stack.imgur.com/nz1cJ.png)