Material UI Grid off center when has background color - material-ui

Question

Grid No Background - centered
Material UI grid looks centered without a background.
Grid Background - not centered
When Material UI grid and grid items have a border and background, you can see they're not centered. They are closer to the left. Only the text and elements inside the grid and grid items are centered. The grid and grid items themselves are not centered.
How would one add a background to the grid so the grid still looks centered?
Codesandbox
import React, { useState } from "react";
import { Grid } from "#mui/material";
export default function GridTest() {
const [hasBackground, setHasBackground] = useState(true);
return (
<>
<div
style={{
border: "3px solid purple",
padding: "40px",
position: "relative"
}}
>
<h2
style={{
position: "relative",
top: "-50px",
color: "purple"
}}
>
div
</h2>
<h2
style={{
position: "relative",
color: "green"
}}
>
Grid
</h2>
<Grid
container
spacing={3}
style={
hasBackground
? {
background: "#bbe4c3",
border: "3px solid green"
}
: { border: "3px solid white" }
}
>
<Grid
item
style={
hasBackground
? {
color: "red",
border: "3px solid red"
}
: { border: "3px solid white" }
}
xs={6}
>
grid item
<div
style={{
color: "blue",
border: "3px solid blue"
}}
>
div inside grid Item
</div>
</Grid>
<Grid
item
style={
hasBackground
? {
color: "red",
border: "3px solid red"
}
: { border: "3px solid white" }
}
xs={6}
>
grid item
<div
style={{
color: "blue",
border: "3px solid blue"
}}
>
div inside grid Item
</div>{" "}
</Grid>
</Grid>
</div>
<button
onClick={() => {
setHasBackground(!hasBackground);
}}
>
toggle grid and grid items backgrounds/borders
</button>
</>
);
}

Answer 1

Add a div around the grid and give that a background instead.
Codesandbox
import React, { useState } from "react";
import { Grid } from "#mui/material";
export default function GridTest() {
const [hasBackground, setHasBackground] = useState(true);
return (
<>
<div
style={{
border: "3px solid purple",
padding: "40px",
position: "relative"
}}
>
<h2
style={{
position: "relative",
top: "-50px",
color: "purple"
}}
>
div
</h2>
<h2
style={{
top: "20px",
position: "relative",
color: "green"
}}
>
Grid
</h2>
<span
style={{
position: "relative",
color: "green"
}}
>
div
</span>
<div
style={{
background: "#bbe4c3",
border: "3px solid green"
}}
>
<Grid
container
spacing={3}
style={
hasBackground
? {
background: "#bbe4c3",
border: "3px solid green"
}
: {}
}
>
<Grid
item
style={
hasBackground
? {
color: "red",
border: "3px solid red"
}
: {}
}
xs={6}
>
grid item
<div
style={{
color: "blue",
border: "3px solid blue"
}}
>
div inside grid Item
</div>
</Grid>
<Grid
item
style={
hasBackground
? {
color: "red",
border: "3px solid red"
}
: {}
}
xs={6}
>
grid item
<div
style={{
color: "blue",
border: "3px solid blue"
}}
>
div inside grid Item
</div>{" "}
</Grid>
</Grid>
</div>
</div>
<button
onClick={() => {
setHasBackground(!hasBackground);
}}
>
toggle grid and grid items backgrounds/borders
</button>
</>
);
}