diff --git a/package.json b/package.json
index ea0f2ca..c9a5caa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.9",
+	"version": "1.11.10",
 	"files": [
 		"/lib"
 	],
diff --git a/src/components/layout/Grid.tsx b/src/components/layout/Grid.tsx
index b5bc4c0..cd1cf07 100644
--- a/src/components/layout/Grid.tsx
+++ b/src/components/layout/Grid.tsx
@@ -60,20 +60,20 @@ export const Container = styled.div`
 
 export const OneSideContainer = styled.div`
 	@media (min-width: ${minWidth.sm}px) {
-		width: calc(50vw + ${width.sm / 2}px);
-		margin-left: calc(50vw - ${width.sm / 2}px);
+		width: calc(50% + ${width.sm / 2}px);
+		margin-left: calc(50% - ${width.sm / 2}px);
 	}
 	@media (min-width: ${minWidth.md}px) {
-		width: calc(50vw + ${width.md / 2}px);
-		margin-left: calc(50vw - ${width.md / 2}px);
+		width: calc(50% + ${width.md / 2}px);
+		margin-left: calc(50% - ${width.md / 2}px);
 	}
 	@media (min-width: ${minWidth.lg}px) {
-		width: calc(50vw + ${width.lg / 2}px);
-		margin-left: calc(50vw - ${width.lg / 2}px);
+		width: calc(50% + ${width.lg / 2}px);
+		margin-left: calc(50% - ${width.lg / 2}px);
 	}
 	@media (min-width: ${minWidth.xl}px) {
-		width: calc(50vw + ${width.xl / 2}px);
-		margin-left: calc(50vw - ${width.xl / 2}px);
+		width: calc(50% + ${width.xl / 2}px);
+		margin-left: calc(50% - ${width.xl / 2}px);
 	}
 `;