fixed animation column problem

src/App/App.css

@@ -53,6 +53,30 @@
   display: none;
 }
 
+.col-max{
+  flex: 0 0 0%;
+  width: max-content !important; 
+  min-width: 77% !important; 
+  max-width: 90% !important;
+}
+
+.col-2{
+  width:16.66666667% !important;
+}
+
+.col-1{
+  width: 8.33333333% !important;
+}
+
+.col-max-10{
+  flex: 0 0 auto;
+  max-width: 83.33333333% !important;
+}
+
+.col{
+  max-width: 100% !important;
+}
+
 
 /* * * * * * * */
 /* * * BODY* * */
@@ -460,6 +484,10 @@ svg {
   max-width: 100%;
   display: block;
 }
+
+.s-svg{
+  max-width: 80%;
+}
 img .middle{
   vertical-align:middle;
 }

src/components/testsvganimation.tsx

@@ -28,8 +28,8 @@ console.log("Started TestSVG")
       scrollTrigger: {
         trigger: "svg",
         scrub: true,
-        start:"top center",
-        end: "bottom center"
+        start:"top middle",
+        end: "bottom middle"
       }
     })
     
@@ -56,7 +56,7 @@ console.log("Started TestSVG")
 
  
   return (
-    <div className="Animation">
+    <div className="col-8">
       
       <svg id="svg" xmlns="" viewBox="0 0 1980 4400">
         

src/contents/example.tsx

@@ -6,8 +6,9 @@ import TestSVG from "../components/testsvganimation";
 export function Example() {
     return (
       <>
-        <TestSVG></TestSVG>
+      <div className="col">
         <div className="col">
+        <TestSVG></TestSVG>
             <h3 className="example">Exercises</h3>
             <i><h6>By Your name</h6></i>
             <div className="example-exercise">
@@ -185,6 +186,7 @@ export function Example() {
 
         
 
+        </div>
       </>
     );
   }