Fix column label alignment

Adjusted column labels for better alignment. Added the parity-magic interactive under the Games section with a working share component and copy link functionality.
-edited src/App.tsx
-edited src/components/ParityBitsGame.tsx

src/components/ParityBitsGame.tsx

@@ -4,6 +4,7 @@ import { Slider } from '@/components/ui/slider';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { RotateCcw, Info } from 'lucide-react';
+import SocialShare from './SocialShare';
 
 interface ParityBitsGameProps {
   showSocialShare?: boolean;
@@ -306,7 +307,7 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
         
         {/* Column parity labels */}
         {(animationState.currentCol >= 0 || animationState.showColParity) && (
-          <div className="grid gap-1" style={{gridTemplateColumns: `repeat(${gridSize + 1}, 1fr)`}}>
+          <div className="grid gap-1 -ml-1" style={{gridTemplateColumns: `repeat(${gridSize + 1}, 1fr)`}}>
             {Array(gridSize + 1).fill(null).map((_, col) => {
               const hasOddParity = animationState.colParities[col];
               const count = animationState.colCounts[col];
@@ -429,6 +430,16 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
             <p><strong>How it works:</strong> Parity bits ensure even parity in each row/column.</p>
             <p>When a bit flips, the affected row and column will have odd parity, pinpointing the error.</p>
           </div>
+
+          {/* Social Share */}
+          {showSocialShare && (
+            <div className="mt-6">
+              <SocialShare 
+                title="Parity Bits Error Detection"
+                description="Learn how parity bits work for error detection and correction through this interactive demonstration!"
+              />
+            </div>
+          )}
         </CardContent>
       </Card>
     </div>