Alignment of text in CSS - html

Question

I am trying to make a list with perfect alignment.
I have entered three items in the list but my list of with grey back ground is not appearing as same alignment as in the below picture.
My box width is changing according to the size of the font. I am providing both image in perfect same alignment and my image with two list item with not same width of grey background.
Below is the my css code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 22px;
}
body {
min-height: 100vh;
font-family: 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
max-width: 500px;
border: 1px solid mediumblue;
margin: auto;
}
header {
width: 100%;
padding: 0 0.25em;
background-color: mediumblue;
color: aliceblue;
display: flex;
justify-content: space-between;
align-items: center;
}
main {
width: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
align-items: center;
overflow-y: auto;
}
footer {
width: 100%;
padding: 0.25em;
background-color: mediumblue;
color: aliceblue;
display: grid;
place-content: center;
}
ul {
width: 100%;
list-style: none;
padding: 0 0.25rem 0.25rem;
}
ul li::before {
content: "\200B";
}
.item {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.5rem 0 0.5rem 0.5rem;
margin: 0.25rem 0;
background-color: #eee;
}
.item: first-child {
margin: 0;
}
.item input[type="checkbox"] {
text-align: center;
width: 2.5rem;
width: 48px;
min-width: 48px;
height: 2.5rem;
height: 48px;
min-height: 48px;
cursor: pointer;
margin-right: 0.5rem;
}
.item input[type="checkbox"]:focus + label {
text-decoration: underline;
}
.item > label {
font-size: 0.75rem;
flex-grow: 1;
}
.item svg {
width: 48px;
min-width: 48px;
height: 36px;
font-size: 1rem;
color: steelblue;
cursor: pointer;
}
.item svg:focus,
.item svg:hover {
color: red;
outline: none;
}
Please guide me where I am doing mistake and why my grey background boxes are not same width as the below image.