Unexpected space between spans - css

Question

I built this button with transform and transition. But there is a tiny problem that I can't figure it out. I have for span to scale them when I want to hover the link. Each span have 25% of a link width. but there is a tiny space between span number 3 and 4.
codepen link
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
a {
font-size: 25px;
font-weight: 700;
display: block;
text-decoration: none;
border: 3px solid rgb(84, 7, 136);
color: rgb(84, 7, 136);
padding: 50px 80px;
position: relative;
overflow: hidden;
}
h2 {
text-align: center;
}
body > div {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.effect11 a span {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: black;
transform: scaleY(0);
transform-origin: top;
transition: all 1s;
z-index: -1;
}
.effect11 a {
transition: all 1s;
}
.effect11 a span:nth-child(1) {
left: 0;
transition-delay: 0.15s;
}
.effect11 a span:nth-child(2) {
left: 25%;
transition-delay: 0.3s;
}
.effect11 a span:nth-child(3) {
left: 50%;
transition-delay: 0.45s;
}
.effect11 a span:nth-child(4) {
left: 75%;
transition-delay: 0.6s;
}
.effect11 a:hover span {
transform: scaleY(1);
}
.effect11 a:hover {
color: white;
}
This is what happening that I don't want to appear (that little space)

Answer 1

Here add flex:1 and It should solve the problem
body > div {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex:1;
}