Souci avec calc sur un element :before

Bonjour à tous,

je rencontre un souci avec le résultat de calc sur un élément placé en :before.
J'avais réalisé un codepen exemple au préalable, disponible ici : https://codepen.io/bhenbe/pen/OQQojP

L'élément en question est la bande rouge qui devait être un élément d'arrière-plan d'une hauteur égale à la première colonne de la grille (bleue dans le codepen). Pour cela, j'ai utilisé une position absolue et calc sur la propriété left afin de sortir l'élément du conteneur pour qu'il fasse toujours 100% du viewport.

.c-introduction{
		position: relative;
		z-index: 3;
		float: left;
		width: 33%;
		min-height: 300px;
		@supports (display: grid) {
			width: auto;
			grid-column: 1;
			grid-row: 1;
		}
		
		&:before{
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100%;
			opacity: .5;
			content: "";
			background-color: red;
			@media(min-width: $container-width){
				left: calc( ( ( 100vw - #{$container-width} ) / 2 ) * -1 );
			}
		}
}

Au niveau du codepen, je ne rencontre aucun souci. La technique semble fonctionner correctement.

Dès que j'ai placé ce code sur un site en développement, une erreur est survenue. L'exemple est disponible ici : https://modest-wiles-6bfb47.netlify.com/#service-consulting
L'élément :before démarrait comme si left avait une valeur entre 5 et 8px. J'avais donc une barre de défilement horizontale sur le body.

Afin de palier au problème, j'ai placé un overflow-x: hidden sur le premier élément parent dans la hiérarchie et j'ai remplacé 100vw par 100vw + 2em dans le calcul afin de m'assurer que l'élément :before couvre bien la totalité du viewport.

Je trouve la solution bof bof mais après divers tests et avoir inspecté la grille et les différents éléments sous Chrome et Firefox, je ne vois pas si le problème est un effet de bord ou une erreur de retour de calc.

Merci d'avance pour l'aide que vous pourrez m'apporter !