Modified float to not be dependant on the padding of the parent

app/components/float.tsx

@@ -1,9 +1,15 @@
 export function Float({ float }: { float: number }) {
     return (
         <>
-            <div className="w-full flex justify-center">
-                <div className="absolute mx-2 h-4 w-1 mt-1 rounded-xl bg-white" style={{left: `calc(${float}*100% - var(--spacing))`}}></div>
-                <div className="w-full h-2 flex my-2 px-2">
+            <div className="w-full flex justify-center relative">
+                <div
+                    className="absolute mx-1 h-4 w-1 mt-1 rounded-xl bg-white"
+                    style={{
+                        left: `calc(${float}*100% - var(--spacing))`,
+                        transform: "translateX(-50%)",
+                    }}
+                ></div>
+                <div className="w-full h-2 flex my-2">
                     <div className="w-7/100 h-full rounded-l-xl bg-green-800"></div>
                     <div className="w-8/100 h-full bg-green-500"></div>
                     <div className="w-23/100 h-full bg-lime-400"></div>